为什么每当单击父表的行时，子表（切换表）都会重复？

Question

我试图做一个包含国家GDP的表格。当任何人单击州行时，将显示子表（地区 GDP 表）。它工作正常，但子表在重复。我制作了一个切换功能来控制子表的隐藏/显示。谁能找出为什么子表重复？解决方案将不胜感激。

运行代码段以正确理解问题。

  var app = new Vue({

  el: "#app",

  data(){

    return {

    opened:[],

    stateGDP: [

        { State: "Rajasthan", "1999-00": "2547", "2000-01": "3679",Id:"23" },

        { State: "Orissa", "1999-00": "38714", "2000-01": "38814",Id:"24" }

      ],

      DistrictGDP: [

        {

          State: "Rajasthan",

          District: "Jaipur",

          "1999-00": "2547",

          "2000-01": "3679",

          Id:"23"

        },

        {

          State: "Rajasthan",

          District: "Jodhpur",

          "1999-00": "2557",

          "2000-01": "3639",

          Id:"23"

        },

        {

          State: "Orissa",

          District: "Bhubaneswar",

          "1999-00": "1983",

          "2000-01": "2068",

          Id:"24"

        },

        {

          State: "Orissa",

          District: "Puri",

          "1999-00": "1923",

          "2000-01": "2008",

          Id:"24"

        }

      ]

      }

    },

  methods:{

    toggle:function(Id) {

    const index = this.opened.indexOf(Id);

    if (index > -1) {

      this.opened.splice(index, 1)

    } else {

      this.opened.push(Id)

    }

 }

}

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

        <div class="table">

          <table class="table-fill">

            <thead>

            <tr>

    <th class="text-center">State/UT</th>

    <th class="text-center">1999-00</th>

    <th class="text-center">2000-01</th>

</tr>

</thead>

  <template v-for="row in stateGDP">

    <tr @click="toggle(row.Id)" :class="{ opened: opened.includes(row.Id) }">

      <td>{{ row.State }}</td>

      <td>{{ row['1999-00'] }}</td>

      <td>{{ row['2000-01'] }}</td>

    </tr>

    <template v-for="(xy, indexStop) in DistrictGDP" v-if="opened.includes(row.Id) && row.Id==xy.Id">

    <thead>

    <tr>

Answer 1

&nbsp;var app = new Vue({&nbsp; el: "#app",&nbsp; data(){&nbsp; &nbsp; return {&nbsp; &nbsp; opened:[],&nbsp; &nbsp; stateGDP: [&nbsp; &nbsp; &nbsp; &nbsp; { State: "Rajasthan", "1999-00": "2547", "2000-01": "3679",Id:"23" },&nbsp; &nbsp; &nbsp; &nbsp; { State: "Orissa", "1999-00": "38714", "2000-01": "38814",Id:"24" }&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; DistrictGDP: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; State: "Rajasthan",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; District: "Jaipur",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "1999-00": "2547",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "2000-01": "3679",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Id:"23"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; State: "Rajasthan",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; District: "Jodhpur",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "1999-00": "2557",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "2000-01": "3639",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Id:"23"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; State: "Orissa",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; District: "Bhubaneswar",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "1999-00": "1983",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "2000-01": "2068",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Id:"24"&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; State: "Orissa",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; District: "Puri",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "1999-00": "1923",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "2000-01": "2008",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Id:"24"&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; methods:{&nbsp; &nbsp; toggle:function(Id) {&nbsp; &nbsp; const index = this.opened.indexOf(Id);&nbsp; &nbsp; if (index > -1) {&nbsp; &nbsp; &nbsp; this.opened.splice(index, 1)&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; this.opened.push(Id)&nbsp; &nbsp; }&nbsp;},&nbsp; &nbsp; getRows(id) {&nbsp; &nbsp; &nbsp; return this.DistrictGDP.filter(district => district.Id === id);&nbsp; &nbsp; }}})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js">.&nbsp;</script><div id="app">&nbsp; <div class="table">&nbsp; &nbsp; <table class="table-fill">&nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th class="text-center">State/UT</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th class="text-center">1999-00</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th class="text-center">2000-01</th>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; <template v-for="row in stateGDP" :class="{ opened: opened.includes(row.Id) }">&nbsp; &nbsp; &nbsp; &nbsp; <tr @click="toggle(row.Id)" style="background-color: #D3D3D3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{{ row.State }}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{{ row["1999-00"] }}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{{ row["2000-01"] }}</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <template&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-if="opened.includes(row.Id)"&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th class="text-center">District</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th class="text-center">1999-00</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th class="text-center">2000-01</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; <tr v-for="(district, index) in getRows(row.Id)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td colspan="1">{{district.District}}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td colspan="1">{{district['1999-00']}}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td colspan="1">{{district['2000-01']}}</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </template>&nbsp; &nbsp; &nbsp; </template>&nbsp; &nbsp; </table>&nbsp; </div></div>现在的解释是，为了获得要在单击时显示的行，您正在执行一个 v-for 循环，并重新创建标头和整个嵌套表，其次数与 DistrictGDP 存在时相同，并且具有相同的 ID 与状态 GDP 相同（在本例中为两次）。我删除了 v-for（整个代码中的第二个），为了呈现嵌套表行，我添加了一个方法 getRows，此方法基于该行筛选所需的行。Id，这样，表格就不需要比较地区GDP中的ID是否与州GDP中的ID相同。请，如果我不清楚，请告诉我。