时间戳

首页 > 解决方案 > Vue.js - 动态删除特定组件

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

问题描述

我正在尝试动态创建/删除 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)
}

这导致实际上删除了一个列。但是，请考虑以下示例。当用户单击第一列的删除图标时，它将删除第二列。（并且当只有一列时，它不能被删除）。

Vue 示例

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

标签： javascriptvue.jsvuejs2

解决方案

我明白了，Vue 上的数组在您修改它们时不会重新呈现。

您需要使用

Vue.set(items, indexOfItem, newValue)

如果你想修改

并使用

Vue.delete(target, indexOfObjectToDelete);

如果要从数组中删除项目

您可以在此处阅读附加信息 https://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>

推荐阅读