1、問題描述
在項目開發中，如果將el-checkbox組件的v-model指令改為使用三元表達式時，會報出【vue/valid-v-model】的錯誤，如下圖所示：
2、分析原因
根據錯誤提示，是因為v-model指令始終把Vue實例的data視為數據真實的來源，要求其綁定的值必須是一個合法的值（LHS），而三元表達式則不能保證其返回值一定是一個HLS值，不能要求v-model一次性觀察多個變量。
3、問題解決
知道具體原因了，那么解決這個問題的方法，是將v-model指令改為使用? :value? 和? @change? 兩個屬性來分別綁定狀態值和狀態變更事件。
具體來說，你可以在el-checkbox組件上使用:value屬性來綁定當前行數據中的狀態值，使用@change屬性來指定狀態變更事件的處理方法。示例代碼如下：
上述代碼中，我們首先使用了一個名為? checkboxValue? 的計算屬性，來對? item.checked? 進行轉換，
在el-checkbox組件中，我們將 :value 屬性綁定到? checkboxValue(item.checked)? 方法，動態改變選中狀態。
最后，我們在 @change 事件中調用? checkboxChange() 方法，來處理狀態變更事件。
<template><li v-for="(item,index) in tableData" :key="index"><div class="content-item"><el-checkbox :value="checkboxValue(item.checked)" @change="checkboxChange(item,index,$event)">選擇城市</el-checkbox></div></li>
</template>
export default {data() {return {tableData: [],};},computed: {checkboxValue() {return function(val) {return val === ''};},},methods: {checkboxChange(item,index,e) {console.log("checkboxchange:", item,index,e);// 這里可以發送 API 請求，更新數據庫中對應行的狀態值item.checked= e ? '' : '上海'this.$set(this.tableData,index,item); // 手動修改數據},},
};
</script>
?4、總結
在上述代碼中，我們將計算屬性改為普通函數，并且在調用時傳入了 item 數據。這樣就能夠正常獲取到 item 數據，并根據 item.checked 的值來返回選中狀態了。
需要注意的是，在 checkboxChange() 方法中仍然需要手動修改 item.checked 的值，并且如果該組件的 item.checked 值從后端接口中獲取，則需要在接口響應后先將tableData中的數據更新，然后調用 this.$forceUpdate() 重新強制渲染頁面，否則多選框組件顯示的狀態不會隨著 item.checked 的變化而變化。
