Question

我必须说我对Vue.js还很新。

我在this tutorial的帮助下建立了一个销售点系统。我对它进行了一些修改，例如项目通过api调用获取，您现在可以编辑事务中项目的价格。在更新到最新的vue版本后，它还需要一些修复，例如v-repeat到v-for等。

现在我遇到了一个问题，即如果您编辑交易中项目的价格它还会更改项目列表中您单击以添加项目的项目的价格。

由于我无法提供应用程序或大部分代码的完整图像的原因。

Here's a screencap trying to explain what's happening

在项目列表模板中，项目使用items从v-for数组呈现。

在事务模板中，项目使用itemList从v-for数组呈现。
为了澄清：itemList数组包含添加到事务中的项目。

我无法理解为什么会发生这种情况或更好，但如何预防呢。如果需要，我可以考虑提供部分代码。

修改

在评论中，Hector猜测我在两个模板中都引用了相同的数组，但事实并非如此。

在项目列表组件中，我通过传递道具来引用items数组。

<item-list :items="items" :add="onItemClick"></item-list>

在事务组件中，我通过传递prop。

来引用lineItems数组

<transaction :items="lineItems" :edit-number-of-items="editNumberOfItems" :edit-price-each="editPriceEach" :edit-total-qty="editTotalQty" :edit-taxed-price="editTaxedPrice" :editing="editing" :remove-item="removeItem"></transaction>

交易表的前三个单元格：

<tbody>
                <tr v-for="item in items">
                    <!-- Code -->
                    <td>{{ item.item.id }}</td>
                    <!-- Name -->
                    <td>
                        <span>{{ item.item.name }}</span>
                    </td>
                    <!-- Price Each -->
                    <td>
                        <span class="editable-item" v-if="!item.editingPriceEach" @click="editPriceEach(item)">{{ item.item.priceEach }}</span>
                        <input v-if="item.editingPriceEach" @keyup.enter="editPriceEach(item)" type="text" v-model="item.item.priceEach" autofocus>
                        <button v-if="item.editingPriceEach" @click="editPriceEach(item)">OK</button>
                    </td>

<tr v-for="item in items"> items指的是道具名称items，而不是数据选项中名为items的数组。

例如，作为道具传递给交易组件的函数editPriceEach如下所示：

editPriceEach: function (lineItem) {
        lineItem.editingPriceEach = !lineItem.editingPriceEach;
}

如您所见，它会触发editingPriceEach属性，然后在onItemClick函数中使用该属性。它用于将项目列表中的项目添加到事务中：

onItemClick: function (item) {
        var found = false;

        for (var i = 0; i < this.lineItems.length; i++) {
            if (this.lineItems[i].item === item) {
                this.lineItems[i].numberOfItems++;
                found = true;
                break;
            }
        }

        if (!found) {
            this.lineItems.push({
                item: item,
                numberOfItems: 1,
                editingNumberOfItems: false,
                editingName: false,
                editingPriceEach: false,
                editingTaxedPrice: false,
                editingTotalQty: false
            });
        }
  },

感谢您对少量代码的耐心。

Vue.js - 如何防止组件之间的数据修改

0 个答案: