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

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

 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)

    }

 },

    getRows(id) {

      return this.DistrictGDP.filter(district => district.Id === 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" :class="{ opened: opened.includes(row.Id) }">

        <tr @click="toggle(row.Id)" style="background-color: #D3D3D3">

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

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

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

        </tr>

        <template

          v-if="opened.includes(row.Id)"

        >

          <thead>

            <tr>

              <th class="text-center">District</th>

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

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

            </tr>

          </thead>

        <tr v-for="(district, index) in getRows(row.Id)">

          <td colspan="1">{{district.District}}</td>

          <td colspan="1">{{district['1999-00']}}</td>

          <td colspan="1">{{district['2000-01']}}</td>

        </tr>

        </template>

      </template>

    </table>

  </div>

</div>

现在的解释是，为了获得要在单击时显示的行，您正在执行一个 v-for 循环，并重新创建标头和整个嵌套表，其次数与 DistrictGDP 存在时相同，并且具有相同的 ID 与状态 GDP 相同（在本例中为两次）。

我删除了 v-for（整个代码中的第二个），为了呈现嵌套表行，我添加了一个方法 getRows，此方法基于该行筛选所需的行。Id，这样，表格就不需要比较地区GDP中的ID是否与州GDP中的ID相同。

请，如果我不清楚，请告诉我。