問題由來
當我們在使用Vue開發項目的時候，最常用的功能莫過於 v-model 。
v-model 是Vue的語法糖，用的很爽，但是有時候也有一些小坑。比如當使用 v-model 去一個computed屬性，然后修改這個computed屬性的時候，就會報錯。
解決方法
1、用“Vuex 的思維”去解決這個問題。給 <input> 中綁定 value，然后偵聽 input 或者 change 事件，在事件回調中調用一個方法。
<input :value="message" @input="updateMessage">
computed: {
message() {
return this.msg + '%';
}
},
methods: {
updateMessage (e) {
this.msg = e.target.value;
}
}
2、使用帶有 setter 的雙向綁定計算屬性:
<input v-model="message">
computed: {
message: {
get () {
return this.msg + '%';
},
set (value) {
this.msg = value;
}
}
}
舉例
比如：購物車的全選按鈕使用的是其他單選按鈕遍歷得到的結果，決定全選按鈕的狀態是否為全選狀態。
我們一般會使用 computed 計算各個單選按鈕的狀態，如果所有的單選按鈕都選中狀態（假設為true），則設置全選按鈕為true；如果有一個單選按鈕的狀態不為選中狀態（假設為false），則設置全選按鈕為false。
由於全選按鈕綁定的是 computed 屬性，所以我們可以使用第一種方式，也就是全選的按鈕不使用 v-model：
<div class="select-all">
<input type="checkbox" id="fb" :checked="allCheck" @change="setAllCheck">
<label for="fb">全選</label>
</div>
單選改變--->computed ---> allCheck改變
點擊allCheck的input，執行函數setAllCheck
setAllCheck里面，把所有的單選全部選中/取消，進而通過第一步對allCheck進行曲線救國改變。