如何使用 v-model 绑定一个 computed 属性？

问题由来

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