具有 Vue(2) 绑定的 HTML 表格行

Question

我有一个购物车/订单列表，我将其绑定到一个工作正常的数组。我最近为添加到数组中的每个项目添加了一个行号，还有一个按钮行。问题是我将它们绑定到当前行，如下所示<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>我从来没有遇到过问题，因为绑定项值为空，因此从未创建该行。但现在索引和按钮创建表的第一行。有没有办法可以在页面加载时清除数组，或者我是否以错误的方式进行操作？

Answer 1

我初始化 table_products [{}]而不是[]

从初始化开始，它在数组中有一个空对象，因此它有一个元素。初始化一个空数组解决了这个问题，因为它没有元素。