Vue функция родительского-дочернего объекта нарушает привязку v-модели

Question

Работаю над исправлением ошибки в чужом коде, поэтому я пытаюсь ограничить то, что я должен изменить здесь.

Похоже, когда я использую функциональность $emit для запуска функций между дочерними и родительскими компонентами , в моих компонентах потеряна привязка v-модели.

Есть родительский компонент:

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>

После обновления моего исходного элемента (который обновляется нормально), я go до обновите другой элемент, и кажется, что v-модель для этого элемента не работает. Не нарушает ли функциональность $emit привязку v-модели после первоначальной загрузки? Как мне это исправить?

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 свойство в родительском компоненте.

Upd.

Также, если вы определяете параметр id в методе eventUpdater: function(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

Также у вас есть v-модель на item.itemId, которая может быть проблемой:

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

Вы можете связать v-model с newItems следующим образом:

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

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