Vue Watch 处理程序未在零值上触发

Question

我有以下用于下拉元素的代码。下拉元素的选项是从数据库中加载的，并且可以正常工作。

每个元素都可以很好地触发监视处理程序，但值为零的元素除外。我看到元素本身具有VUE GET / SET无反应属性，但是当使用零值选择下拉选项时，我的手表处理程序拒绝触发。我需要将它保持在零值，除非它绝对不能完成，因为零表示我们的数据库系统中为此应用程序制作的所有数据的聚合。必须从零更改它也会导致其他系统的更改。关于为什么零值没有触发手表处理程序的任何见解？

.select-site p Active Site: select(v-model='selectedSite') option(v-for='option in options', v-bind:value='option.value') | {{ option.text }}

let dataStore = new Vue({
  data: {
    selectedSchoolValue: '',
    schoolSites: [{
      text: 'Select a School',
      value: '',
      default: 1,
    }]
  },
  watch: {

    selectedSchoolValue(newSelectedSchool, oldValue) {

      if (newSelectedSchool !== oldValue) {

        topbarVM.selectedSite = newSelectedSchool;

        if (pageVM) {
          pageVM.selectedSite = newSelectedSchool;
        }

        if (newSelectedSchool) {
          document.cookie = `schoolSelectValue=${ newSelectedSchool };path=/`;
        }

      }

      if (typeof loadVizData === 'function') {
        loadVizData();
      }

    }

  }
});

/*Populates school list from DB*/
const getSchoolsForSelect = (callback = null) => {

  let self = dataStore;

  GetSchools({}, (schools) => {

    if (schools.status === 400) {
      return location.href = "/login?message=Your%20session%20expired,%20please%20log%20in%20again.";
    }


    // strip trailing whitespace
    schools.forEach((el) => {
      el.schoolName = el.schoolName.trim();
    });

    // sort by alpha ascending on schoolName, except
    // the District (siteId 70) should be forced to the top
    schools.sort(function(a, b) {
      if (b.siteId === 70)
        return 1;

      if (a.schoolName < b.schoolName || (a.siteId === 70 || b.siteId === 70))
        return -1;

      if (a.schoolName > b.schoolName)
        return 1;

      return 0;
    });

    // sort schools by schoolName, but force district to the top
    // of the select (array element zero)

    schools.forEach((el) => {

      /*self.schoolSites.push({
          text: el.schoolName,
          value: el.siteId,
      });*/

      //below does not work. Vue Watcher for dropdown does not fire when the zero value is selected.

      //force school 70 (district) to Id value 0 to match indicator system. Easier to do on front-end
      if (el.siteId === 70) {
        self.schoolSites.push({
          text: el.schoolName,
          value: 0
        });
      } else {
        self.schoolSites.push({
          text: el.schoolName,
          value: el.siteId,
        });
      }

    });

    callback && callback();

  });

};

Answer 1

我正在尝试使用 watcher 进行选择，我认为没有问题...

new Vue({
  el: '#app',
  data: {
    options: [
      {id: 0, name: 'Please select...'},
      {id: 1, name: 'Option 1'},
      {id: 2, name: 'Option 2'},
      {id: 3, name: 'Option 3'},
    ],
    selected: 0
  },
  watch: {
    selected (n, o) {
      console.log(n, o)
    }
  }
})

<div id="app">
  <select v-model="selected">
    <option v-for="{id, name} in options" :value="id">
      {{ name }}
    </option>
  </select>
  
  <p>You select the option: {{ selected }}</p>
</div>

<script src="https://unpkg.com/vue@2.5.9/dist/vue.min.js"></script>