#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 [{}]
вместо []
При инициализации в массиве был пустой объект, поэтому у него был элемент. Вместо этого инициализация пустого массива устранила эту проблему, поскольку в нем не было элемента.
Спасибо Филу в комментариях