1. 首页
  2. 问题列表
  3. 使用vue.js为列表动态呈现html，但在第一个元素之后，它就消失了
提问者：小点点

使用vue.js为列表动态呈现html，但在第一个元素之后，它就消失了


我是Vue.js的新手。我使用它动态地将html添加到表中，它可以使用方法AddItemToSales()添加第一个元素，但是在添加第二个元素之后，所有的东西都会消失，添加第三个元素也不会恢复。

这些项目被添加到vue变量内部的列表中，因为我可以调用getSaleItems()，它准确地显示了添加的所有内容。

这里怎么了？我没有收到任何错误信息。

vue.js:

var vueSales = new Vue({
    el: '#saleItemsTableBody',
    data: {
        saleItems: []
    },
    methods: {
        addItemToSales(name, sku, pricePerUnit) {
            if(this.saleItems.some(x => x.name === name && x.sku === sku)) {
                var item = this.saleItems.find(x => x.name === name && x.sku === sku);
                item.quantity++;
            } else {
                this.saleItems.push({"name": name, "sku": sku, "quantity": 1, "pricePerUnit": parseFloat(pricePerUnit)})
            }
        },
        getSaleItems() {
            return this.saleItems;
        }
    },
});

HTML:

<tbody id="saleItemsTableBody" v-for="saleItem in saleItems" :key="saleItem.name">
    <template>
        <tr>
            <td class="pl-0">
                <a href="#" class="text-dark-75 font-weight-bolder text-hover-primary mb-1 font-size-lg"> @{{ saleItem.name }} </a>
                <span class="text-muted font-weight-bold text-muted d-block">Stock available: totalStock units</span>
            </td>
            <td>
                <div class="quantity-input-group input-group">
                    <div class="input-group-prepend">
                        <button class="btn btn-light-dark" type="button">-</button>
                    </div>
                    <input value="1" min="1" max="100" type="text" class="form-control" placeholder="units"/>
                    <div class="input-group-append">
                        <button class="btn btn-light-dark" type="button">+</button>
                    </div>
                </div>
                <p class="quantity-warning text-danger">Only totalStock units available in stock.</p>
            </td>
            <td>
                <a href="#" class="text-dark-75 font-weight-bolder text-hover-primary mb-1 font-size-lg">$ @{{ saleItem.pricePerUnit }}</a>
                <span class="text-muted font-weight-bold text-muted d-block">Unimplemented</span>
            </td>
            <td>
                <a href="#" class="text-dark-75 font-weight-bolder text-hover-primary mb-1 font-size-lg">$ <span> @{{ saleItem.pricePerUnit }} </span></a>
                <span class="text-muted font-weight-bold text-muted d-block">Un <span> Implemented </span></span>
            </td>
            <td class="pr-0 text-right">
                <a href="#" class="btn btn-icon btn-light btn-hover-primary btn-sm">
                    <i class="fas fa-trash"></i>
                </a>
            </td>
        </tr>
    </template>
</tbody>

共1个答案

匿名用户

在不运行代码的情况下，看起来这是因为增加数量的方式是增加数量，但没有将其设置/分配回this.saleitems，您需要将item重新分配回this.saleitems。

我还没有测试过这个，但是可能是这样的:

addItemToSales(name, sku, pricePerUnit) {
    if(this.saleItems.some(x => x.name === name && x.sku === sku)) {
        var itemIdx = this.saleItems.findIndex(x => x.name === name && x.sku === sku);
        var item = this.saleItems[itemIdx];
        item.quantity++;
        this.saleItems.splice(itemIdx, 0, item);
    } else {
        this.saleItems.push({"name": name, "sku": sku, "quantity": 1, "pricePerUnit": parseFloat(pricePerUnit)})
    }
},

相关问题