удалить свойство объекта с помощью атрибута Vue, заданного DOM

Question

Я использую v-for с переменной node, которая запускается для всех свойств объекта TreeObject . Как я могу удалить одно из свойств, имеющих только этот узел в моей руке? (предположим, что функция не может получить доступ TreeObject )

HTML:

<div v-for="node in TreeObject">
  <div>{{ node.name }}</div>
  <button @click="Delete(node)">delete</button>
</div>

Сценарий:

[...]
methods: {
  Delete(node) {
    // somehow I want to delete node from TreeObject
  }
}

Answer 1

Предполагая, что TreeObject является массивом объектов, и их единственным определяющим идентификатором является их свойство name - используйте это свойство для фильтра out рассматриваемого узла.

Если TreeObject это prop на Компоненте (только для чтения) - Скопируйте TreeObject и установите для него свойство data, например, DynamicTreeObject, и используйте это свойство в template Или используйте callback prop, как onDelete, чтобы передать рассматриваемый узел родительскому Компоненту, который имеет доступ к исходному TreeObject, и выполнить там ваши удаления, после чего данные будут перетекать в ваш дочерний Компонент.

Delete (node) {
  this.TreeObject = this.TreeObject.filter(n => n.name !== node.name)
}