javascript - Vue.js - 动态删除特定组件

Question

我正在尝试动态创建/删除 Vue 组件。我已经弄清楚如何动态添加组件，但在允许用户删除特定组件方面遇到了一些麻烦。

考虑下面两个 Vue 文件:

TableControls.vue

<a v-on:click="addColumn">Add Column</a>

<script>
    export default {
        methods: {
            addColumn: function () {
                Event.$emit('column-was-added')
            }
        }
    };

</script>

DocumentViewer.vue :

<div v-for="count in columns">
   <VueDragResize :id="count">
      <a @click="removeColumn(count)">Remove Column</a>
   </VueDragResize>
</div>

<script>
import VueDragResize from 'vue-drag-resize';

    export default {
        components: {
            VueDragResize
        },
        data() {
            return {
                columns: [1],
            }

        },
        created() {
            Event.$on("column-was-added", () => this.addColumn())
        },

        methods: {
            addColumn: function () {
                this.columns.push(this.columns.length + 1)
            },
            removeColumn: function (id) {
                this.columns.splice(id, 1)
            }
        }
    };
</script>

如您所见，每当用户单击 <a v-on:click="addColumn">Add Column</a> ，它将提交一个事件，并且 DocumentViewer.vue文件将拾取它，并触发 addColumn方法。这最终将创建一个新的 <VueDragResize></VueDragResize>组件。

这很好用。

问题是当我想再次删除该组件时。我的removeColumn方法只是从 columns 中删除一个 id数组:

removeColumn: function (id) {
    this.columns.splice(id, 1)
}

这会导致一列实际上被删除。但是，请考虑下面的示例。当用户单击第一列的删除图标时，它将删除第二列。 (当只有一列时，无法将其删除)。

我相信这是因为我 splice()数组，但我看不出还能如何动态删除该组件？

Answer 1

我明白了，当你修改 Vue 上的数组时，它们不会重新渲染。

您需要使用

Vue.set(items, indexOfItem, newValue)

如果你想修改

并使用

Vue.delete(target, indexOfObjectToDelete);

如果你想从数组中删除一个项目

您可以在此处阅读附加信息 https://v2.vuejs.org/v2/api/#Vue-delete

如果你想从数组中删除一个项目。使用它会导致组件重新渲染。

在这种情况下，这样做会很直观

removeColumn: function (id) {
   Vue.delete(this.columns, id)
}

请注意，id 应该是索引。 Vue.delete 确保组件的重新渲染。

编辑，您必须使用索引，而不是此处的计数。

<div v-for="(count, index) in columns">
   <VueDragResize :id="index">
      <a @click="removeColumn(index)">Remove Column</a>
   </VueDragResize>
</div>