Переключение строк в таблице после передачи данных в массив | Вью

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 не включается.

Рассмотрите возможность замены этогофрагмент:

<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);
}

С помощью приведенного ниже фрагмента:

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>