Блог

Главная - Вопросы по программированию - Инициализация данных массива из массива prop в компоненте Vue

Инициализация данных массива из массива prop в компоненте Vue

#javascript #vue.js

#javascript #vue.js

Вопрос:

В моем компоненте Vue у меня есть массив (объектов) prop selectedSuppliers . Я хочу инициализировать реквизит данных, вызываемый suppliers selectedSuppliers , но любые последующие изменения suppliers не должны распространяться на selectedSuppliers .

Я попробовал следующее

 props: {
  selectedSuppliers: {
    type: Array,
    required: true
  },
},
data () {
  return {
    selected: [...this.selectedSuppliers],
  }
}

Но это не работает. Каков правильный способ инициализации свойства данных массива для array prop?

Ответ №1:

Если selectedSuppliers это массив объектов, то оператор распространения выполняет только поверхностную копию этого массива. Это означает, что обновление любого объекта suppliers будет обновлять содержимое selectedSuppliers .

Вы можете взглянуть на этот короткий пост.

Комментарии:

1. все в порядке, мне просто нужно клонировать массив

2. Это моя точка зрения, вы на самом деле не клонируете массив с помощью оператора spread . Вы просто создаете новый массив с теми же объектами (с той же ссылкой).

3. да, это то, что я хочу: другой массив, одни и те же объекты

4. Хорошо, так что я не понимаю вашей проблемы. Что вы подразумеваете под «это не работает»? Какие-то ошибки в консоли?

5. Ошибок нет, но для реквизита данных установлен пустой массив, когда реквизит компонента представляет собой массив с одним элементом

Ответ №2:

Это может сработать,

 props: {
  selectedSuppliers: {
    type: Array,
    required: true
  },
},
data () {
  return {
    selected: this.selectedSuppliers.map(o => Object.assign({}, o)
  }
}