我的项目中有一个输入框的值 content
须要同时依赖四个变量data1
, data2
, data3
,data4
, 同时还要实现双向绑定。
<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
}
}
},