Удаление дочернего компонента Vue

Я действительно застрял на этом.Я создал компонент Vue (2.0), который состоит из дочерних компонентов, все это упаковывается в Webpacked и т. д. Например, это родитель:

<div>

    <h1>This is just a title for lulz</h1>

    <rowcomponent v-for="row in rows" :row-data="row"></rowcomponent>

</div>

, который в графе rows перешел к нему, который выглядит примерно так:

rows: [{ sometext: "Foo"} , { sometext: "Bar" }]

Итак, мой компонент строки выглядит следующим образом:

<div>{{ this.sometext }} <button @click="deleteRow">Delete Row</button></div>

и я чувствую, что это должно быть очень легко установить метод rowcomponent что-то вроде это:

deleteRow() {
    this.delete();
}

нужно ли мне $ emit что-то родителю с индексом строки в нем, чтобы удалить его? Это сводит меня с ума. Все примеры показывают, что это было бы легко сделать, но не в том случае, когда у вас есть дочерние компоненты, которые хотят удалить себя.

7
vue.js

1 ответов

да, дочерний компонент не может удалить себя. Причина в том, что исходные данные для rows удерживается в Родительском компоненте.

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

вот простой jsFiddle для справки:https://jsfiddle.net/mani04/4kyzkgLu/

как вы можете видеть, есть родительский компонент, который содержит массив данных, и дочерний компонент, который отправляет события через $emit удалить самостоятельно. Родитель прослушивает событие delete с помощью v-on следующим образом:

<row-component
    v-for="(row, index) in rows"
    :row-data="row"
    v-on:delete-row="deleteThisRow(index)">
</row-component>

на index имущество, предоставленное v-for можно назвать deleteThisRow метод, когда delete-row событие получено из дочернего компонента.

18