vue 双向绑定失效

Question

双向绑定失效，效果是点击html里面的 i 标签（位置请看注释）触发方法，将collapse-transition组件里的v-show属性改为true,控制组件展开，问题是组件里有个me属相，如果把页面里的{{me}}删掉的话，组件就无法展开（相对应的v-show属性已经改为true,单页面中display仍为node），加上就可以这是为什么？

<style scoped lang="less">
.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;
                    }
                }
            }
        }
    }
}
</style>
<template>
    <div>
        <div class="transfer-box clear">
            <div class="lt">
                <div class="transfer-control-title"></div>
                <div class="transfer-choose-box">
                    <ul v-if="industryList" class="parent-muen">
                        <li v-for="(item, index) in industryList" :key="index" class="parent-muen-item">
                            <div>
                                <!--点击这里触发展开方法-->
                                <i @click="toggleSubCollapse(index)" class="el-icon-arrow-down"></i>
                                <el-checkbox>{{item.industry}}</el-checkbox>
                            </div>
                            <!-- 此处span勿删 ???????????????????????????????????????????????????-->
                            <span style="display:none">{{me}}</span>
                            <collapse-transition>
                                <ul v-show="showSubList['show'+index]" class="sub-muen">
                                    <li v-for="(list, listIndex) in item.sub" :key="listIndex">
                                        <el-checkbox>{{list}}</el-checkbox>
                                    </li>
                                </ul>
                            </collapse-transition>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="rt"></div>
        </div>
    </div>
</template>
<script>
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'
export default {
  components: {
      CollapseTransition,
  },
  props: {},
  data() {
    return {
        me: 1,
        showSubList: {},//列表展开状态
        industryList: {//列表数据
            132: {
                industry: '医疗',
                sub: {
                    13204: '保健品',
                    13203: '医疗器械',
                    13202: '药品',
                    13201: '医疗机构'
                }
            },
            131: {
                industry: '成人用品',
                sub: {
                    13101: '成人用品'
                }
            },
            130: {
                industry: '公益',
                sub: {
                    13001: '公益'
                }
            }
        }
    };
  },
  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值的改变刚好触发了页面数据的更新。