Vuejs v-for удалить элемент - PullRequest
Новая
       10

Vuejs v-for удалить элемент

0 голосов
/ 12 июня 2018

У меня есть такой код: 

<div id="files">
  <div v-for="(file, key) in data.files" v-bind:id="key">
    @{{ file }}
    <span v-on:click="removeFile(key)">
      <button>X</button>
    </span>
    <button v-on:click="addFiles()">Add Files</button>
  </div>
</div>

Файл js 

methods: {
   removeFile(key) {
       var elem = document.getElementById("#" + key);
       elem.parentNode.removeChild(elem);
       return false;
   }

Когда я нажал кнопку, выбранный файл также был удален, но он также выдал ошибку, такую ​​как:

Uncaught TypeError: Невозможно прочитать свойство 'parentNode' со значением NULL

Я пробовал таким образом, но та же проблема: файл был удален с ошибкой 

var parent = document.getElementById("files");
var child = document.getElementById("#" + key);

parent.removeChild(child);

Uncaught TypeError: Не удалось выполнить «removeChild» на «Узле»: параметр 1 не относится к типу «Узел».

Есть идеи?Большое спасибо!

1 Ответ

0 голосов
/ 12 июня 2018

Замените содержимое вашего removeFile() метода следующим: (учитывая, что переменная files является массивом) 

methods: {
   removeFile(key) {
       this.files.splice(key, 1);
   }

Вы также можете использовать помощник Vue для удаления элементов в массиве илисвойство объекта: 

methods: {
   removeFile(key) {
       this.$delete(this.files, key);
   }
...