ピットを踏む Vue の el-select ドロップダウン ボックス: データがエコーされた後、課題問題を選択できません

ドロップダウンボックスのバグ:

データがエコーされた後、課題問題は選択できません

写真が示すように:

 

console.log(val)の場合、選択した値のIDは取得できますが、ボックスには割り当てられません

 

 解決：

ドロップダウン ボックスの変更イベントに、次のコードを追加します。

<el-select v-model="formLabelAlign.def_area_id" 
        placeholder="请选择区" @change="getSchool" >
     <el-option v-for="item in areaList" 
        :key="item.id" :label="item.name" :value="item.id">
    </el-option>
</el-select>

 getSchool(val) {
    console.log(val)
    //解决：el-select下拉框多选，选择后赋值成功，输入框不显示选中的值
    this.$nextTick(() => {
        this.$forceUpdate()
    })
 }

写真の通り、問題は解決しました 

 

応用知識のポイント:

$nextTick

関数: vue の nextTick() は、次の DOM 更新サイクルが終了した後に遅延コールバックを実行します。データを変更した後に $nextTick() を使用すると、コールバックで更新された DOM を取得できます。

アップデートさせる

機能: Vue の公式ドキュメントでは、$forceUpdate には更新を強制し、vue インスタンスに仮想 dom の再レンダリングを強制する機能があることが指摘されています。これはインスタンス自体とスロット コンテンツに挿入されたサブコンポーネントにのみ影響することに注意してください。すべてのサブコンポーネントではありません。