Vue 嵌套循环为啥没用？

Question

问题描述

双重循环遍历数据，取不到值

问题出现的环境背景及自己尝试过哪些方法

之前不用双重嵌套，只是一层嵌套，数据是可以正常渲染的。
][2]

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<!-- 子组件定义 -->
<template id="indexComponent" v-for="ListItem in policeList">
    <div>
        <div  v-for="dispatchGroup in ListItem" v-bind:class="[ dispatchGroups.id==chiochedNo ? 'msgbox'+' '+dispatchGroups.policeselect+' '+dispatchGroups.policeDept : '' ,'msgbox'+' '+'msgbox-default'+' '+dispatchGroups.policeDept1]" @click.stop="chioceClick(dispatchGroups.id)">
            <div v-cloak class="sname">{{dispatchGroups.name}}</div>
            <div v-if="(dispatchGroups.hasChildren>0)&&(btnNext===true)"><a href="javascript:" class="link" data-id="1" @click.stop="getdispatchGroups(dispatchGroups.id,dispatchGroups.name)"></a></div>
            <div class="clear"></div>
            <div class="call_left">
                <div v-bind:class="{'call-all-choose':dispatchGroups.pdtGroupNo==currentGroup.no ,'call-all':dispatchGroups.pdtGroupNo!=currentGroup.no}"
                        @mousedown="groupWinCallBtnClickEventForStart(dispatchGroups.pdtGroupNo)"
                        @mouseup="groupWinCallBtnClickEventForStop()"><p>组呼电台</p></div>
                <div v-bind:class="{'call-all-choose':dispatchGroups.topicGroupNo==currentGroup.no ,'call-all':dispatchGroups.topicGroupNo!=currentGroup.no}"
                        @mousedown="groupWinCallBtnClickEventForStart(dispatchGroups.topicGroupNo)"
                        @mouseup="groupWinCallBtnClickEventForStop()" ><p>组呼警务通</p></div>
            </div>
            <div class="clear"></div>
            <div v-bind:class="'toolbar'+' '+dispatchGroups.policeseicon">
                <a href="javascript:" class="ico1" v-bind:title="[dispatchGroups.pdtMemberNo!=null ? '基地台 ' + dispatchGroups.pdtMemberNo: '基地台 空']" @click="sendCall(dispatchGroups.pdtMemberNo)"></a>
                <a href="javascript:" class="ico2" v-bind:title="'电话 ' + dispatchGroups.phone" @click="openCall(dispatchGroups.phone,dispatchGroups.name)"></a>
                <a href="javascript:" class="ico3" title="通讯录" @click = "openAddress(dispatchGroups.id,dispatchGroups.name)"></a>
                <a href="javascript:" class="ico4" title="消息" @click = "sendGroupMsg(dispatchGroups.pdtGroupNo)"></a>
                <a href="javascript:" class="ico5" title="云视讯" @click = "openViewConference(dispatchGroups.id)"></a>
            </div>
        </div>
    </div>
</template>

 <index-component :btn-next="true" 
                         :dispatch-groups="dispatchGroup" 
                         :current-group="currentGroup" 
                         :chioched-no="chiochedNo"
                         @opencall="openCall" 
                         @choice="chioceClick" 
                         @groupWinCallBtnClickEventForStart="groupWinCallBtnClickEventForStart" 
                         @groupstop="groupWinCallBtnClickEventForStop" 
                         @sendcall="sendCall"  
                         @openAddress="openAddress" 
                         @sendGroupMsg="sendGroupMsg" 
                         @openViewConference="openViewConference" 
                         @getdispatch="getdispatchGroups" 
                         @loadNextLevelUrl="loadNextLevelUrl">
        </index-component>

你期待的结果是什么？实际看到的错误信息又是什么？

而现在用双重嵌套就不可以了。也不知道是哪里出错了

Answer 1

如果理解没错的话，题主的疑惑是index-component上的数据取不到？

如果是这样的话问题在这于index-component存在于你定义的子组件模板<template id="indexComponent" v-for="ListItem in policeList">...</template>之外，循环体之外的结构怎么能获取到循环体内部的数据呢？这里有值作用域的问题。
另外官方建议for循环不要定义在template这个占位标签上，另用一个有实体意义的标签取代。

Answer 2

不知道题主是不是粗心,v-for的子项和绑定的数据不是同一个名称,"dispatchGroup"和"dispatchGroups"的名称对比就能看出来了
<template id="indexComponent" v-for="ListItem in policeList">

<div>
    <div  v-for="dispatchGroup in ListItem" v-bind:class="[ dispatchGroups.id==chiochedNo ? 'msgbox'+' '+dispatchGroups.policeselect+' '+dispatchGroups.policeDept : '' ,'msgbox'+' '+'msgbox-default'+' '+dispatchGroups.policeDept1]" @click.stop="chioceClick(dispatchGroups.id)">
        <div v-cloak class="sname">{{dispatchGroups.name}}</div>
        <div v-if="(dispatchGroups.hasChildren>0)&&(btnNext===true)"><a href="javascript:" class="link" data-id="1" @click.stop="getdispatchGroups(dispatchGroups.id,dispatchGroups.name)"></a></div>
        <div class="clear"></div>
        <div class="call_left">
            <div v-bind:class="{'call-all-choose':dispatchGroups.pdtGroupNo==currentGroup.no ,'call-all':dispatchGroups.pdtGroupNo!=currentGroup.no}"
                    @mousedown="groupWinCallBtnClickEventForStart(dispatchGroups.pdtGroupNo)"
                    @mouseup="groupWinCallBtnClickEventForStop()"><p>组呼电台</p></div>
            <div v-bind:class="{'call-all-choose':dispatchGroups.topicGroupNo==currentGroup.no ,'call-all':dispatchGroups.topicGroupNo!=currentGroup.no}"
                    @mousedown="groupWinCallBtnClickEventForStart(dispatchGroups.topicGroupNo)"
                    @mouseup="groupWinCallBtnClickEventForStop()" ><p>组呼警务通</p></div>
        </div>
        <div class="clear"></div>
        <div v-bind:class="'toolbar'+' '+dispatchGroups.policeseicon">
            <a href="javascript:" class="ico1" v-bind:title="[dispatchGroups.pdtMemberNo!=null ? '基地台 ' + dispatchGroups.pdtMemberNo: '基地台 空']" @click="sendCall(dispatchGroups.pdtMemberNo)"></a>
            <a href="javascript:" class="ico2" v-bind:title="'电话 ' + dispatchGroups.phone" @click="openCall(dispatchGroups.phone,dispatchGroups.name)"></a>
            <a href="javascript:" class="ico3" title="通讯录" @click = "openAddress(dispatchGroups.id,dispatchGroups.name)"></a>
            <a href="javascript:" class="ico4" title="消息" @click = "sendGroupMsg(dispatchGroups.pdtGroupNo)"></a>
            <a href="javascript:" class="ico5" title="云视讯" @click = "openViewConference(dispatchGroups.id)"></a>
        </div>
    </div>
</div>

</template>