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

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

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

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

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

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

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

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

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

EDIT:

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

在项列表组件中，我通过传递prop来引用 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 作为prop传递给事务组件，如下所示：

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
            });
        }
  },

感谢您对少量代码的耐心等待 .