我的项目中有一个输入框的值content须要同时依赖四个变量data1, data2, data3data4, 同时还要实现双向绑定。

 <textarea rows="4" v-model="content" placeholder="形容"/>

一开始我把content的赋值写在办法中,然而随着逻辑的减少,四个变量扭转时都要为content赋值,代码就变得很反复。

于是我试着把content写在computed中,发现在输入框中输入框中批改值时,界面上能够变动,然而用vue dev tools能够看到,this.content的值并没有发生变化。Vue官网文档指出,计算属性是基于它们的响应式依赖进行缓存的。只在相干响应式依赖产生扭转时它们才会从新求值。

然而computed中的值咱们能够给它一个setter属性。本认为设置setter就能够间接扭转原变量了,后果并没有扭转,官网文档给出的setter也都是扭转其余变量的值。

最初想了一个变通的办法,我在data中申明了另一个content1,当输入框发生变化时,会触发计算属性的setter,从而扭转content1的值。

残缺代码如下:

 <textarea rows="4" v-model="content" placeholder="形容"/> data() {    return {      data1: '',      data2: '',      data3: '',      data4: '',      content1: ''    }  },    computed: {    content: {      get: function() {          let val = `${this.data1}${this.data2}${this.data3}${this.data4}`          this.content1 = val          return val      },      set: function(v) {        this.content1 = v        return v      }    }  },