Question

我在编辑由Vue创建的项目时遇到了麻烦，在编辑时，它总是得到错误的项目索引来替换。我了解Vue无法对某些变化（例如数组长度）做出反应，因此我正在使用Vue docs

中建议的方法

但是这些都不起作用。我怀疑这与我的设置有关。请参见下面。

NB

myData是作为道具发送的对象。
从API提取数据时，此代码可完美工作（即在索引未更改的静态数据上）
以下代码的目标是：
1. 向数组添加子项
2. 通过以下方式编辑该孩子：
  - 通过其ID查找孩子的索引
  - 用已编辑数据的新对象替换该孩子
  - 当前所有添加的子项的索引始终为0，因此它将替换数组中的第一个子对象，而不是其自身
结果被发送到主vue应用，在其中它更新Data中的myData值，并通过props将数据向下馈给子组件

添加项目

methods: {
      localSave() {
            const myLocalData = this.myData 
            const myChildrenLength = myLocalData.children.dependents.length
            const myChildren = {
                'id': myChildrenLength + 1,
                'fullName': this.childsFullName, 
                'gender': this.childsGender, 
                'dateOfBirth': this.childsYearOfBirth, 
                'parentage': this.childsParentage, 
                'isFinanciallyIndependent': this.childsDependency 
            }

            Vue.set(myLocalData.children.dependents, myChildrenLength, myChildren);

            localStorage.setItem('myData', JSON.stringify(myLocalData));
            this.$emit('send-local-data', myLocalData);
        }
}

编辑项目

methods: {
      localEditSave() {
            const myLocalData = this.myData;
            const myChild = {
                'id': this.childsId,
                'fullName': this.childsFullName, 
                'gender': this.childsGender, 
                'dateOfBirth': this.childsYearOfBirth, 
                'parentage': this.childsParentage, 
                'isFinanciallyIndependent': this.childsDependency 
            }

            const arrayPath = myLocalData.children.dependents;
            let removeIndex = arrayPath.map(function(item) { return item.id; }).indexOf( myChild.id );

            Vue.set(arrayPath, removeIndex, myChild);

            console.log('localEditSave removeIndex = ', removeIndex)

            localStorage.setItem('myData', JSON.stringify(myLocalData));
            this.$emit('send-local-data', myLocalData);
        },
    }

Answer 1

仅根据所提供的内容，您似乎正在使用具有数据列表的父组件，并且正在尝试操纵子组件中的子项。

在您的代码中，您正在执行一些复杂的代码，显然可以找到正在编辑（或尝试删除）的项目的索引。数据属于父组件，因此您要做的就是通知项目的父组件以执行某些功能。

最简单的方法是在创建子项时为其提供索引，并在父模板中捕获子项发出的事件...

v-for="(item, index) in itemList" index="index" v-on:DeleteItem="deleteItem(index)"

子组件执行以下操作...

$emit("DeleteItem", this.index)

这就是您需要的所有代码。无需构造临时项，无需搜索所有项-只需告诉父项删除索引n处的项即可。

对于大多数其他功能，相同的模式也应适用。在编写代码时请记住，数据列表属于父组件-您不能在子组件中修改它-即您不能在子代码中添加或删除项，您所要做的就是通知您想要以某种方式对其进行修改。

孩子可以编辑项目中的数据，因为这不会修改列表本身。

另一件事可能会对您的工作有所帮助，那就是为组件提供数据模型。在那种情况下，该模型保存数据，并且所有组件都引用同一模型-这可以消除处理父/子数据问题的许多复杂性，因为所有组件都可以对同一个数据进行对等访问。

希望有帮助。

Answer 2

所以问题在于我正在提交 id作为文本，因此当removeIndex将item.id与myChild.id进行比较时，它返回了0

我刚刚改变了

const myChild = {
      'id': this.childsId,

到

const myChild = {
      parseInt('id': this.childsId),

它现在可以正常工作了。

即使使用Vue.set，更新数组也不会在Vue中重新渲染

2 个答案: