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

Question

Working on fixing a bug in someone else's code, so I'm trying to limit what I have to change here.

Seems like when I use $emit functionality to run functions between child and parent components, v-model binding is being lost in my components.

There is a parent component:

<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>

Then, there is a child component:

<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>

After updating my initial item (which updates fine), I go to update another item, and it seems like the v-model for that item does not work. Is the $emit functionality breaking the v-model binding after initially loading? How do I fix this?

Answer 1

You are using this:

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

but should use this:

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

Removed this. .

Also I didn't find items as data property in parent component.

Upd.

Also if you define id parameter in eventUpdater: function(id) method you should emit it like this:

<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

Also you have v-model on item.itemId which could be a problem:

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

You could consider to bind v-model to newItems like this:

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

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