Vue JS Make 下拉 select 选择选项时运行查询

Question

I am very new to Vue and stuck on a problem. I have several drop-down select menus which return info from an Axios request The select t only works when I hit the submit button though. I would like it to run when the user makes the drop-down selection. I can't work out what I am missing. Can anyone help?

I have included some of the code below. Thanks

The html:

 <div class="form-group col-md-6">
                      <label for="subject" class="control-label">Subject</label>
                      <select
                        v-model="subject"
                        class="form-control"
                        :disabled="selectDisabledSubject"
                      >
                        <option disabled value="">Select subject</option>
                        <option
                          v-for="subject in uniqueSubjects"
                          :key="subject"
                          :value="subject"
                        >
                          {{ subject }}
                        </option>
                      </select>
                    </div>

The vue

uniqueSubjects() {
      const metaVFees = this.results
        .filter((result) => result.metaData && result.metaData.V)
        .map((item) => item.metaData.V)
        .filter((subject, i, arr) => arr.indexOf(subject) === i);
      // Split multiple subjects in strings and store in an array
      let subjects = [];
      metaVFees.forEach((item) => {
        const splitArr = item.split(", ");
        subjects = subjects.concat(splitArr);
      });
      return subjects
        .sort()
        .filter((subjects, i, arr) => arr.indexOf(subjects) === i);
    },

Answer 1

You can use vue Watchers

watch:{
 subject(newVal){
  // call the function you normally call with submit click
 }
}