【Vue1.0】—— v-for树状结构按层级获取到数据后，如何实现数据的双向绑定-CSDN博客

问题

根据业务要求，要实现按层级获取到树状结构的数据，比如，一进来，只能拿到省份的数据
图片描述

然后点击后面的箭头，获取市级的数据
图片描述

再点击箭头，获取区县的数据
图片描述

并且，选中后，每个都有对应的提交按钮
图片描述

按照以前常用的写法，首先：我在data中定义了一个叫agentList的数组，把获取到的省份数据存进去，存成对象数组。同时给每个对象一个showSubmit属性，用v-if判断这个属性用以决定是否显示提交按钮，用v-for去遍历展示数据，省市区都是按照这个层级逻辑去做。
最后请求数据后发现，aiyawocao！不能双向绑定啊，市级的选中后并不能在后面出现对应的提交按钮啊，市级的点了小贱头并不能展示区县啊。
代码如下，这是错误的，或者说是不符合vue规范的，请勿模仿。

    <!-- 省级 -->
    <ul>
        <li v-for="(index,item) in agentList">
            <input type="checkbox" :id="item.id">
            <label :for="item.id">
                <span>{{item.name}}</span>
            </label>
            <span v-on:click="showHideCity(item)">>></span>
            <span v-if="item.showSubmit===true" v-on:click="submit(item)">提 交</span>
            <!-- 市级 -->
            <div v-if="item.showChild===true">
                <div v-for="(index1,item1) in item.agentList">
                    <input type="checkbox" :id="item1.id">
                    <label :for="item1.id">
                        <span>{{item1.name}}</span>
                    </label>
                    <span v-on:click="showHideArea(item1)">>></span>
                    <span v-if="item1.showSubmit===true" v-on:click="submit(item1)">提 交</span>
                    <!-- 区级 -->
                    <div v-if="item1.showChild===true">
                        <div v-for="(index2,item2) in item1.agentList">
                            <input type="checkbox" v-on:click="chooseAgent(item2)" :id="item2.id">
                            <label :for="item2.id">
                                <span>{{item2.name}}</span>
                            </label>
                            <span v-if="item2.showSubmit===true" v-on:click="submit(item2)">提 交</span>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>

看起来没毛病吧，逻辑也不复杂，js也不难，无非就是点击后请求数据，给对应的item赋值，赋值后放进对应的数据。
但是，出问题了，首先，市级的选中后，后面的提交按钮出不来，调试不出是哪里的问题，input选中后，明明把item1.showSubmit改成了true,但是人家按钮就是不显示。第二个问题，市级的点小贱头，调试窗口明明加请求到了数据，也把这个数据给到item1.agentList了，同时item1.showChild也改成true了，但是人家还是不显示。
这就懵逼了，去翻翻vue的教程，作者说，v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做。噢，那我把if改成show就可以了吧，改了发现还是不行，并没有什么变化。/摊手/摊手
再找找别的地方的问题，这里除了使用了v-if，还使用了v-for，v-for也是有点小矫情的，大概就是，如果你v-for的对象一开始length=0，后面渲染出来的点击事件也会有问题。（好吧，这句话是我说，作者并没有在教程中提到。）

解决

那么，这样就可以知道怎么解决了，大概的方案就是：
【template】
将v-if都改为v-show
【script】
获取到省级后，同时给每个省级一个各项值都为0的初始市级子级对象（用来占座位的），待用户点击省份后对应的小贱头需要加载市级的时候，就赋真实的数据，占座位的初始市级子级对象被替换掉了。
同样的，要给加载出来的每个市级一个各项值都为0的初始区级子级对象，待用户点击市份后对应的小贱头需要加载区级的时候，就赋真实的数据。

嗯，最后，还是那句话，如果我有不对的地方，或者你有更好的方法，请指出O(∩_∩)O