Vue 2 监听属性未触发问题求助

Hey there! Let's figure out why your cascading dropdown watchers aren't firing. Since your setup is Country → Department → Location → Region with AJAX-loaded options, here are the most common issues to check and fix:

If your selected values aren't initialized in the Vue instance's data() (or ref()/reactive() for Vue 3), the watcher won't detect changes at all. This is one of the easiest pitfalls to hit.

Wrong approach (non-reactive):

new Vue({
  el: '#app',
  mounted() {
    this.selectedCountry = ''; // Not declared in data()
  }
})

Correct approach:

new Vue({
  el: '#app',
  data() {
    return {
      selectedCountry: '',
      selectedDepartment: '',
      selectedLocation: '',
      selectedRegion: '',
      // Option lists for each dropdown
      countryOptions: [],
      departmentOptions: [],
      locationOptions: [],
      regionOptions: []
    }
  },
  watch: {
    selectedCountry(newVal) {
      if (newVal) {
        // Trigger AJAX to load department options
        this.fetchDepartments(newVal);
      } else {
        // Reset downstream dropdowns and their options
        this.departmentOptions = [];
        this.selectedDepartment = '';
      }
    }
    // Add watchers for selectedDepartment, selectedLocation here
  },
  methods: {
    fetchDepartments(countryId) {
      // Your AJAX logic here, e.g., axios.get(`/departments?country=${countryId}`)
      // Then update departmentOptions with the response
    }
  }
})

If you're storing the entire selected object (instead of just an ID) in your selected value variable, the default watcher only detects reference changes—not changes to internal properties. You'll need to enable deep: true in this case:

watch: {
  selectedCountry: {
    handler(newVal) {
      this.fetchDepartments(newVal.id);
    },
    deep: true // Critical for watching object properties
  }
}

Note: This isn't needed if you're using primitive values like strings/numbers for selected IDs.

Double-check that your <select> elements are bound to the correct selected value variables with v-model. A wrong binding means user selections won't update the variable, so the watcher never triggers.

Correct binding:

<select v-model="selectedCountry">
  <option v-for="country in countryOptions" :value="country.id">{{ country.name }}</option>
</select>

<select v-model="selectedDepartment" :disabled="!selectedCountry">
  <option v-for="dept in departmentOptions" :value="dept.id">{{ dept.name }}</option>
</select>

Common mistake: Binding v-model to the option list (e.g., v-model="countryOptions") instead of the selected value variable.

If you're using Vue 3, the watcher syntax is different from Vue 2—you'll need to use the watch function instead of the options-based watch object:

import { createApp, ref, watch } from 'vue';

const app = createApp({
  setup() {
    const selectedCountry = ref('');
    const departmentOptions = ref([]);

    watch(selectedCountry, (newVal) => {
      if (newVal) {
        fetchDepartments(newVal);
      } else {
        departmentOptions.value = [];
      }
    });

    async function fetchDepartments(countryId) {
      // AJAX logic here, e.g., const res = await fetch(`/departments?country=${countryId}`)
      departmentOptions.value = await res.json();
    }

    return { selectedCountry, departmentOptions };
  }
});

app.mount('#app');

Mixing Vue 2 and Vue 3 syntax will definitely break your watchers.

When updating your dropdown options after AJAX, make sure you're using Vue's reactive methods. Avoid directly modifying array indices (e.g., this.departmentOptions[0] = newDept)—this won't trigger reactivity.

Correct ways to update options:

// Replace the entire array with a new one
this.departmentOptions = response.data;

// Or use array methods that trigger reactivity
this.departmentOptions.splice(0, this.departmentOptions.length, ...response.data);

Add a console.log(newVal) inside your watcher handler. If you see the log when selecting a value, the watcher is firing—your issue is likely in the AJAX logic or option list updates. If you don't see the log, go back to checking reactive declarations and v-model bindings first.

内容的提问来源于stack exchange，提问作者Maramal