vue 双向绑定失效

Question

双向绑定失效，效果是点击html里面的 i 标签（位置请看注释）触发方法，将collapse-transition组件里的v-show属性改为true,控制组件展开，问题是组件里有个me属相，如果把页面里的{{me}}删掉的话，组件就无法展开（相对应的v-show属性已经改为true,单页面中display仍为node），加上就可以这是为什么？<style scoped>.transfer-box{    width: 500px;    >div{        width: 220px;        height: 400px;        border: 1px solid #c1c1c1;        position: relative;        font-size: 12px;        line-height: 30px;        .transfer-control-title{            height: 30px;            background: #e9e9e9;            line-height: 30px;            padding: 0 5px;            position: absolute;            width: 100%;            box-sizing: border-box;        }        .transfer-choose-box{            margin-top: 30px;            height: 361px;            overflow-y: auto;            .parent-muen{                >.parent-muen-item{                    .sub-muen{                        margin-left: 30px;                    }                }            }        }    }}methods: {      //根据生命周期里生成的不变量数组，切换菜单展开状态      toggleSubCollapse(key){        this.me++;        this.showSubList['show'+key] = !this.showSubList['show'+key]      }  },  created() {      //对获取的数据遍历，生成控制列表展开的对象      Object.keys(this.industryList).forEach((val, index, arr)=>{         this.showSubList['show'+val] = false;      })  },  mounted() {        }};</script>

Answer 1

难道不是this.showSubList['show'+val] = false;这动态添加属性的关系？

你改为下面的代码试试

let temp = {}

Object.keys(this.industryList).forEach((val, index, arr)=>{

  temp['show'+val] = false;

})

this.showSubList = temp

至于为什么删了me之后不生效了，我觉得是页面中用到me的时候me值的改变刚好触发了页面数据的更新。