Блог

Главная - Вопросы по программированию - Строки таблицы HTML с привязкой Vue (2)

Строки таблицы HTML с привязкой Vue (2)

#javascript #html #vuejs2

#javascript #HTML #vuejs2

Вопрос:

У меня есть список покупок / заказов, который я привязал к массиву, который работал нормально.

Недавно я добавил номер строки для каждого элемента, добавленного в массив, а также строку кнопок. Проблема в том, что я привязал их к текущей строке следующим образом

 <div id="table">
    <table class="table table-sm table-bordered table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col">#</th>
          <th scope="col">Product</th>
          <th scope="col">Type</th>
          <th scope="col">Attribute</th>
          <th scope="col">Height</th>
          <th scope="col">Width</th>
          <th scope="col">Price</th>
          <th width="1%" scope="col">Remove</th>
        </tr>
      </thead>
        <tbody>
          <tr v-for="(item, index) in table_products">
            <td>{{ index  1 }}</td>
            <td>{{ item.product }}</td>
            <td>{{ item.type }}</td>
            <td>{{ item.attribute }}</td>
            <td>{{ item.height }}</td>
            <td>{{ item.width }}</td>
            <td>{{ item.price }}</td>
            <td><button class="btn btn-danger" @click="deleteRow(index)">X</button></td>
          </tr> 
        </tbody>
      </table>
    </div>
  </div>

У меня никогда не было проблем, потому что значения связанных элементов были равны нулю, поэтому строка никогда не создавалась. Но теперь индекс и кнопка создают первую строку таблицы.

Есть ли способ очистить массив при загрузке страницы, или я иду по неправильному пути?

Таблица при загрузке страницы

редактировать: добавлен мой компонент vue для контекста

 var table_products = new Vue ({
   el : '#table',
   data : {
     table_products : [{
    }]
   },

Комментарии:

1. Если вам не нужны никакие строки, не помещайте ничего в table_products массив. На данный момент кажется, что у вас есть один элемент массива с пустыми свойствами для product , type , и т. Д

2. @Phil Эти элементы равны нулю, только кнопка index и remove создает строку

3. если по какой-то странной причине вы не можете иметь массив table_products ampty, когда нет данных, как насчет <tbody v-if="table_products[0].product">

4.Инициализировать table_products как [] , а не [{}]

5. почему? поскольку способ, которым вы его инициализировали, у вас есть элемент в этом массиве — вот почему он отображается, потому что вы его отображаете

Ответ №1:

Я инициализировал table_products [{}] вместо []

При инициализации в массиве был пустой объект, поэтому у него был элемент. Вместо этого инициализация пустого массива устранила эту проблему, поскольку в нем не было элемента.

Спасибо Филу в комментариях