vue 雙向綁定失效

雙向綁定失效，效果是點(diǎn)擊html里面的 i 標(biāo)簽（位置請看注釋）觸發(fā)方法，將collapse-transition組件里的v-show屬性改為true,控制組件展開，問題是組件里有個(gè)me屬相，如果把頁面里的{{me}}刪掉的話，組件就無法展開（相對應(yīng)的v-show屬性已經(jīng)改為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>
                                <!--點(diǎn)擊這里觸發(fā)展開方法-->
                                <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: {},//列表展開狀態(tài)
        industryList: {//列表數(shù)據(jù)
            132: {
                industry: '醫(yī)療',
                sub: {
                    13204: '保健品',
                    13203: '醫(yī)療器械',
                    13202: '藥品',
                    13201: '醫(yī)療機(jī)構(gòu)'
                }
            },
            131: {
                industry: '成人用品',
                sub: {
                    13101: '成人用品'
                }
            },
            130: {
                industry: '公益',
                sub: {
                    13001: '公益'
                }
            }
        }
    };
  },
  methods: {
      //根據(jù)生命周期里生成的不變量數(shù)組，切換菜單展開狀態(tài)
      toggleSubCollapse(key){
        this.me++;
        this.showSubList['show'+key] = !this.showSubList['show'+key]
      }
  },
  created() {
      //對獲取的數(shù)據(jù)遍歷，生成控制列表展開的對象
      Object.keys(this.industryList).forEach((val, index, arr)=>{
         this.showSubList['show'+val] = false;
      })
  },
  mounted() {
      
  }
};
</script>