Изменение массива в свойстве данных

Я полагаю, вы знаете реактивную систему Vue.js, когда вы определяете переменные в свойстве data. Когда вы изменяете массив, возможно, вы устанавливаете индекс непосредственно, как показано ниже.

export default {
  data () {
    return {
      testArray: ['test1', 'test2', 'test3']
    }
  }
}
this.testArray[1] = 'test4';

К сожалению, Vue.js не может обнаружить такие изменения. Сама переменная будет изменена, но реактивная система не сможет работать (например, даже если этот массив используется в шаблоне и изменен, это изменение не отразится в браузере).

Кроме того, указание длины массива имеет ту же проблему 😥

this.testArray.length = 0;

Причины и способы устранения

Как написано в Официальном руководстве Vue.js, есть типы изменений, которые Vue не может обнаружить. На самом деле я уже объяснял типы в первом разделе😼.

В Vue.js полезно использовать Array.prototype.splice(). splice() изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые элементы. Подробности см. в посте Касун Дилуника ниже.



Array.splice() — интересно и полезно
Давайте напишем код Javascriptmedium.com



Давайте исправим пример, который я упоминал ранее. Это может быть трудно понять, так как splice() имеет три переменные... Код ниже заменит вторые элементы на test4.

export default {
  data () {
    return {
      testArray: ['test1', 'test2', 'test3']
    }
  }
}
this.testArray.splice(1, 1, 'test')
// Result: [ 'test1', 'test4', 'test3' ]

Если вы хотите удалить один или несколько элементов без замены из массива, вы можете написать, как показано ниже.

export default {
  data () {
    return {
      testArray: ['test1', 'test2', 'test3']
    }
  }
}
this.testArray.splice(0, 2)
// Result: [ 'test3' ]

Надеюсь, это будет полезно =)