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:

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

В результате столбец фактически удаляется. Однако рассмотрим приведенный ниже пример. Когда пользователь нажимает значок удаления для первого столбца, он удаляет второй столбец. (И когда присутствует только один столбец, его нельзя удалить).

Я полагаю, это связано с тем, что я splice() массив, но я не вижу, как еще я могу удалить компонент динамически?

Answer 1

Я вижу, Array on 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 обеспечивает повторную визуализацию компонента.

EDIT, вы должны использовать индекс, а не счет здесь.

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

Answer 2

Я бы порекомендовал изменить ваши данные, каждый элемент должен быть объектом с идентификатором и любыми другими свойствами, которые вы хотите.Не просто идентификатор, тогда вам понадобится что-то вроде этого:

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}
    }