Vue 父子发出函数正在破坏 v-model 绑定

Question

正在修复其他人代码中的错误，因此我试图限制我必须在此处更改的内容。

似乎当我使用 $emit 功能来运行子组件和父组件之间的函数时，v-model 绑定在我的组件中丢失了。

有一个父组件：

ParentComponent.vue

<template>
    <child-component v-bind:items="this.items"
                     v-on:event_child="this.eventUpdater">
    </child-component>
<template>
<script>
    import ChildComponent from './ChildComponent.vue';
    export default {
        components: {
            'child-component': ChildComponent
        },
        methods: {
            getItemDetails() {
                //...ajax request that loads item details for page.
            },
            eventUpdater: function(id) {
                this.getItemDetails();
            }
        }
    }
</script>

然后，还有一个子组件：

ChildComponent.vue

<template>
    <div v-for="item in items">
        <input v-model="item.itemId">
    </div>
    <button v-on:click="updateItems">update</button>
</template>
<script>
    export default {
        props: ['items'],
        methods: {
            updateItems() {
                //...ajax call that updates items.
                this.emitWhat();
            },
            emitWhat: function () {
                this.$emit('event_child');
            }
        }
    }
</script>

更新我的初始项目（更新正常）后，我去更新另一个项目，那个项目的 v-model 似乎不起作用。 $emit 功能是否会在初始加载后破坏 v-model 绑定？我该如何解决这个问题？

Answer 1

您正在使用这个：

    <child-component v-bind:items="this.items"
                 v-on:event_child="this.eventUpdater">

但应该使用这个：

<child-component v-bind:items="items"
    v-on:event_child="eventUpdater">

已删除 this.。

我也没有在父组件中找到 items 作为 data 属性。

更新

此外，如果您在 eventUpdater: function(id) 方法中定义 id 参数，您应该 emit 像这样：

<template>
    <div v-for="item in items">
        <input v-model="item.itemId">
    </div>
    <button v-on:click="updateItems(item.itemId)">update</button>
</template>

        updateItems(id) {
            //...ajax call that updates items.
            this.emitWhat(id);
        },
        emitWhat: function (id) {
            this.$emit('event_child', id);
        }

Upd.2

你在 item.itemId 上还有 v-model，这可能是个问题：

<input v-model="item.itemId">

您可以考虑像这样将 v-model 绑定到 newItems：

<input v-model="newItems[itemId]">

data(){
  return {
    newItems: [],
    //...
  };
}

Vue 父子发出函数正在破坏 v-model 绑定

Vue parent-child emit function is breaking v-model binding

javascript

vue.js

components

parent-child

emit