数据推送到数组后切换表中的行 | Vue

Question

我正在尝试创建一个表格，其中包含在您单击按钮时切换的各个行，在本例中为“视图”。 该表是用数组的 for 循环构造的。 当我已经加载数据时，我已经设法让它工作，但是当我将数据推送到数组时，切换不起作用。

如何在单击“查看”时切换行？

谢谢！

这是JSBin

下面是我的代码：

HTML

<div id="app">
    <button type="button" class="btn btn-primary" @click="sites.push( {
        sku: '1005',
        purchasePrice: 4.50
      })">Add Data</button>

          <div class="table-wrapper">
            <table class="table table-hovered">
              <thead>
                <tr>
                  <th>SKU</th>
                  <th>Purchase Price</th>
                </tr>
              </thead>
              <tbody>
                <template v-for="item in sites" >
                  <tr>
                    <th>{{ item.sku }}</th>
                    <th> {{ item.purchasePrice }}</th>
                    <th id="toggle" @click="addEvent($event, item)">
                      View
                    </th>
                  </tr>
                  <template v-if="item.showTab">
                    <tr>
                      <th class="subCol subTable" colspan="6">
                         Content
                      </th>
                    </tr>
                  </template>
                </template>

              </tbody>
            </table>
          </div>
  </div>

Vue JavaScript

new Vue({
  el: '#app',
  data: {
        sites: [
      {
        sku: "10001",
        purchasePrice: "4.50",
        showTab: false,

      },
      {
        sku: "10002",
        purchasePrice: "4.50",
        showTab: false,
      },
      {
        sku: "10003",
        purchasePrice: "4.50",
        showTab: false,
      }
    ],
    newData: [],
    },
    methods: {
     addEvent(event, item, type, target) {
      this.newData = [];
      for (let i = 0; i < this.sites.length; i++) {
        if (event.target.id == "toggle") {
          item.showTab = !item.showTab;
        }
      }
      this.newData.push(this.sites);
    },
    }
});

Answer 1

有一些小错误导致了你意想不到的结果。

首先，当一个项目被添加到你的数组中时，showTab 属性不包括在内。

考虑替换这个 sn-p：

<button type="button" class="btn btn-primary" @click="sites.push( {
    sku: '1005',
    purchasePrice: 4.50
  })">
  Add Data
</button>

通过这个：

<button type="button" class="btn btn-primary" @click="sites.push( {
    sku: '1005',
    purchasePrice: 4.50,
    showTab: false
  })">
  Add Data
</button>

然后，当想要触发切换时，不是针对要切换的元素，而是遍历数组并更新所有元素，因为它们都满足条件if (event.target.id == "toggle")。

据我了解，您想要实现的只是切换一个元素。为此，您应该替换它：

addEvent(event, item, type, target) {
   this.newData = [];
   for (let i = 0; i < this.sites.length; i++) {
     if (event.target.id == "toggle") {
       item.showTab = !item.showTab;
     }
   }
   this.newData.push(this.sites);
}

通过下面的sn-p：

addEvent(event, item, type, target) { // There are some unused arguments here, consider removing them if they are not needed
   item.showTab = !item.showTab;
}

您甚至可以通过以下方式直接在 html 上更新项目切换模式：

<th id="toggle" @click="item.showTab = !item.showTab">
  View
</th>