我試圖做一個包含國家GDP的表格。當(dāng)任何人單擊州行時，將顯示子表（地區(qū) GDP 表）。它工作正常，但子表在重復(fù)。我制作了一個切換功能來控制子表的隱藏/顯示。誰能找出為什么子表重復(fù)？解決方案將不勝感激。運行代碼段以正確理解問題。  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>