Why doesn't the Vue nested loop work?

problem description

double loop traversing data, unable to get value

the environmental background of the problems and what methods you have tried

before, there is no double nesting, only one layer of nesting, the data can be rendered normally.
![][2]

//




Sep.27,2021

I don't know if the subject is careless. The subitems of v-for and the bound data are not the same name. By comparing the names of "dispatchGroup" and "dispatchGroups", we can see
< template id= "indexComponent" v br 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()">

</div> <div v-bind:class="{'call-all-choose':dispatchGroups.topicGroupNo==currentGroup.no ,'call-all':dispatchGroups.topicGroupNo!=currentGroup.no}" @mousedown="groupWinCallBtnClickEventForStart(dispatchGroups.topicGroupNo)" @mouseup="groupWinCallBtnClickEventForStop()" >

</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 >


if understood correctly, the author's doubt is that the data on index-component is not available.

if this is the case, the problem lies in index-component in the sub-component template you defined < template id= "indexComponent" v for for = "ListItem in policeList" >. < / template > , how can the structure outside the loop body obtain the data inside the loop body? There is a problem of value scope.
another official recommendation is that the for loop should not be defined on the placeholder tag template , but instead be replaced by a tag with substantive meaning.

Menu