Vue - computed 应用新场景(改变data中的值)
2019-02-15 本文已影响36人
Skyling
最近项目中(vue + ele)发现计算属性的另外一个场景:
- 动态切换ele-ui中表单中某个值的required的值;
- 在表单某个值变化时候, 表单中的另外一个值需要动态赋值。
废话不多说, show codes~
data() {
return {
age: 10,
query: {
studenId: xx
},
rules: {
studenId: {
required: true, message: '请xx, trigger: 'change'
}
},
}
}
computed: {
showType() {
const result = this.age>10 //依赖于data中的age
if (!this.query.studenId) { //studenId值为空时,赋默认值
this.query.studenId = '默认值'
}
this.rules.studenId.required = result //动态给studenId的规则required赋值
return result
}
},
ps:针对这个需求可能平时要在生命周期初始阶段赋值一次,还要在age变化的时候watch写重复的代码。所有赋值操作都依赖于age做响应变化,因此想在计算属性的函数中做这个赋值操作即可,欢迎QA~