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上的Array不会重新呈现。

您需要使用

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>

Answer 2

我建议重塑数据，每个元素应该是一个具有ID和其他所需属性的对象。不只是一个ID，您就需要这样的东西：

removeColumn(id) {
                const elToRemove = this.columns.findIndex(el => el.id === id)
                let newArr = [elToRemove, ...this.columns]
                this.columns = newArr
            }

还为computed设置另一个columns属性，以确保它们动态更改（添加/删除时）：

computed: {
      dynColumns(){ return this.columns}
    }

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

2 个答案: