问题由来
当我们在使用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进行曲线救国改变。