拜托 vue 的小伙伴们帮忙看个问题

[zuicaidenage]

现在我的页面上有个 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 变成了非响应式属性嘛？

[corkspin]

对象变了吧，监听不到 property 的变化

[FakeLeung]

修改对象要用 $set。试试。

[shintendo]

你的 data 是怎么定义的？

[zuicaidenage]

@FakeLeung `this.$set(this.chooseItem,'app',val)` 就是这行吧

[zuicaidenage]

@shintendo chooseItem: {}

[zuicaidenage]

@corkspin 只是 chooseItem 的属性变了吧

[shintendo]

没看懂你的 computed 里面的 app 这个变量是哪来的，跟 chooseItem.app 什么关系。
只说一下，只有定义在 data 里面的属性是响应式的，后续用$set 新加的属性也是响应式的，直接用.赋值的属性不是响应式的。
好的实践是尽可能地把要用到的变量和属性都在 data 里面定义出来。

[nekoneko]

真的没看懂想干嘛。。。。

[zuicaidenage]

@shintendo 代码删多了。。 `let app = this.channelList.filter(t=>t.id==this.chooseItem.app)[0]`

[corkspin]

// this.obj.a='' 这行注释掉的话切换选择框计算属性是有效的，去掉注释就不行

[corkspin]

// this.obj.a='' 这行注释掉的话切换选择框计算属性是有效的，去掉注释就不行
动态增加属性，不能监听。change 方法里的这个 this.$set(this.obj, 'a', val)检查到已经有了的属性也不会监听。
所以应该就这样了吧

[Trim21]

在 data 里给 obj.a 加一个默认值就好了

[zuicaidenage]

多谢楼上两位指点