2

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

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

.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();

  });

};
4

1 回答 1

0

我正在尝试使用观察者进行选择，但我认为没有问题...

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>

于 2017-11-30T19:19:02.627 回答