Vueウォッチハンドラがゼロ値でトリガーしない

Question

私はドロップダウン要素のために次のコードを持っています。ドロップダウン要素のオプションはデータベースからロードされ、正しく動作します。

すべての要素は、ゼロという値を持つ例外を除いて、ウォッチハンドラファインを起動します。要素自体にVue取得/設定の反応性プロパティがあることがわかりますが、ウォッチハンドラはゼロ値でドロップダウンオプションを選択したときに起動を拒否します。このアプリケーション用に作成されたデータベースシステムのすべてのデータを集約していることを示すため、絶対に実行できない限り、ゼロ値に保つ必要があります。それを0から変更すると、他のシステムも変更されます。ゼロ値がウォッチハンドラを起動しない理由についての洞察はありますか？

.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>