Question

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

每个元素都会激活监视处理程序，除了值为零的监视处理程序。我看到元素本身具有Vue获取/设置反应属性，但是当选择具有零值的下拉选项时，我的监视处理程序拒绝触发。我需要将它保持为零值，除非绝对不能这样做，因为零表示我们为此应用程序制作的数据库系统中的所有数据的聚合。必须将其从零更改将导致其他系统的更改。关于为什么零值不会触发监视处理程序的任何见解？

.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

我正在尝试选择观察者，我认为没问题......

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>

Vue Watch Handler不会触发Zero Value

1 个答案: