vueデータを配列として使用すると、無限のループや非自動更新が発生しやすくなります。配列が参照によって割り当てられることは誰もが知っています。1つを変更する限り、元の配列が変更されます。その後、Vueはページを更新し、データの変更に応じてデータを再バインドしますが、再バインドされない場合があります。私が遭遇した主な2つのことがあります。
1.データキャッシング、これは非常に優れたソリューションです。関係者は、Vueが仮想ノードを使用することも説明しています。データが変更されていない場合、データは更新されません。更新する必要がある場合は、要素に主要な属性を追加できます。
：key="uniqueId"
2.選択コントロールを使用するときは、最初にコードhtmlを確認してください
<div>
<radio-group v-model="showClassType" type="button" size="large">
<radio label="我的班级"></radio>
<radio label="学校班级"></radio>
</radio-group>
</div>
<div class="meta">选择班级</div>
<div v-if="showClassType=='我的班级'" class="task-choose-box">
<i-select v-model="classid" filterable style="width:180px">
<i-option v-for="item in classList" v-if="item.createUser==userid" :key="item.uuid" :value="item.uuid">{
{ item.classname }}</i-option>
</i-select>
</div>
<div v-if="showClassType=='学校班级'" class="task-choose-box">
<i-select v-model="classid" filterable style="width:180px">
<i-option v-for="item in classList" v-if="item.createUser!=userid" :value="item.uuid">{
{ item.classname }}</i-option>
</i-select>
</div>
コードを簡単に記述します
。1。ここでは2つの文字列変数と1つの配列を使用します
。2。showClassTypeタイプを変更してオプションのコンテンツをトリガーし、classList内の対応するタイプの値を除外します。最後に、ドロップダウンボックスをクリックして値を選択し、クラスID
3にバインドします。インターフェイスは次のようになります
。4。ドロップダウンボックスの1つにデータがあり、もう1つにデータがない場合、1つのデータを選択して切り替えると、すべてのドロップダウンボックスの内容が表示されなくなります。
処理：showClassType出力classListを監視することにより、データがすべてそこにあることがわかりました
watch: {
showClassType:function(newVal,OldVal){
this.classid= newVal==OldVal?this.classid:"";//最终处理方法
console.log(this.classList)
console.log(this.classid)
console.log("切换学生会出问题噢噢噢噢")
},
},
それから、クラスIDを選択して切り替えたときにクラスIDをクリアしなかったのは、それが理由なのだろうかと思いました。テスト後は、まさにこんな感じでした。次に、
this.classid = newVal == OldVal？this.classid： ""; / /
対処する最終処理方法。問題ありません