现在我的页面上有个 select
<select type="text" class="form-control" v-bind="chooseItem" v-on:change="changeApp($event.target.value)">
<option value="" selected="selected">-- 应用来源 --</option>
<option v-for="item in channelList" :value="item.id" v-text="item.name"></option>
</select>
我绑定了一个 chooseItem
data 为 chooseItem:{},
然后我的 methods 里有两个方法
add: function () {
this.editLayer.display = true;
// this.chooseItem = {};
// this.chooseItem.app = "";
},
changeApp: function(val){
this.$set(this.chooseItem,'app',val)
}
add 方法调用后会展示这个选择框
我写了个 computed
computed : {
productList:function(){
if(app == '**') {
return this.products[0]
}else if (app == '***') {
return this.products[1]
}else {
return {}
}
}
},
我发现如果我注释掉 methods 里的this.chooseItem.app = "";
时,我的 computed 才会随着 select 的切换改变值,不加注释的话 computed 就毫无反应,不过这是什么原因呢?难道是这行代码使 chooseItem.app 变成了非响应式属性嘛?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>hello</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style media="screen">
.hide {
display: none
}
</style>
</head>
<body>
<div id="demo">
<div id="selectDiv" class="hide">
<select type="text" class="form-control" v-bind="obj.a" v-on:change="change($event.target.value)" >
<option value="" select='selected'></option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<p>{{c}}</p>
</div>
<button type="button" name="button" @click='showDiv()' value="show">show</button>
</div>
</body>
<script type="text/javascript">
var demo = new Vue({
el: '#demo',
data: {
obj: {},
test: ''
},
computed: {
c: function() {
return this.obj.a+" computed"
}
},
methods: {
change(val) {
this.$set(this.obj, 'a', val)
},
showDiv(){
this.obj={}
// this.obj.a='' 这行注释掉的话切换选择框计算属性是有效的,去掉注释就不行
document.getElementById('selectDiv').removeAttribute('class')
}
}
})
</script>
</html>
1
corkspin 2019-01-18 12:50:50 +08:00
对象变了吧,监听不到 property 的变化
|
2
FakeLeung 2019-01-18 12:59:23 +08:00
修改对象要用 $set。试试。
|
3
shintendo 2019-01-18 13:08:08 +08:00
你的 data 是怎么定义的?
|
4
zuicaidenage OP @FakeLeung `this.$set(this.chooseItem,'app',val)` 就是这行吧
|
5
zuicaidenage OP @shintendo chooseItem: {}
|
6
zuicaidenage OP @corkspin 只是 chooseItem 的属性变了吧
|
7
shintendo 2019-01-18 15:20:20 +08:00
没看懂你的 computed 里面的 app 这个变量是哪来的,跟 chooseItem.app 什么关系。
只说一下,只有定义在 data 里面的属性是响应式的,后续用$set 新加的属性也是响应式的,直接用.赋值的属性不是响应式的。 好的实践是尽可能地把要用到的变量和属性都在 data 里面定义出来。 |
8
nekoneko 2019-01-18 15:58:44 +08:00
真的没看懂想干嘛。。。。
|
9
zuicaidenage OP |
10
corkspin 2019-01-18 19:30:38 +08:00
// this.obj.a='' 这行注释掉的话切换选择框计算属性是有效的,去掉注释就不行
|
11
corkspin 2019-01-18 19:33:11 +08:00
// this.obj.a='' 这行注释掉的话切换选择框计算属性是有效的,去掉注释就不行
动态增加属性,不能监听。change 方法里的这个 this.$set(this.obj, 'a', val)检查到已经有了的属性也不会监听。 所以应该就这样了吧 |
12
Trim21 2019-01-18 20:28:03 +08:00 via Android
在 data 里给 obj.a 加一个默认值就好了
|
13
zuicaidenage OP 多谢楼上两位指点
|