Передача массива как реквизита в моде - PullRequest
Новая
       16

Передача массива как реквизита в моде

0 голосов
/ 26 марта 2019

Я хочу передать массив из одного компонента в другой в vueJs, что я могу сделать с 

<add-new-admin-modal
 :permissions = "permissions"
</add-new-admin-modal>

В моем другом компоненте, который на самом деле является модальным, я получаю реквизиты как,

props: {
  permissions: {
    type: Array,
    default: () => []
  }
}

Здесь, когда я пытаюсь изменить массив разрешений, он отражает родительские данные, как упомянуто в документации.

https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

, поэтому я попытался соператор распространения 

data () {
 return {
  statePermissions: [...this.permissions]
 }
}

Массив statePermissions по-прежнему пуст, когда я пытаюсь использовать вышеуказанный метод,

Я даже пытался использовать Object.assign 

data () {
 return {
  statePermissions: Object.assign([], this.permissions)
 }
}

Тем не менее, это не такработа.

В моем модале я обращаюсь к нему как 

<div v-for = "permission in statePermissions" :key = "permission.id">
 ...someHtml here.
</div>

Основная идея в том, что у меня есть компонент, который получает данные через API, затем у меня есть модал, который принимаетэти данные и обновляет его соответственно и представить его в API.Когда модальное окно закрыто, родительский компонент должен иметь неотредактированные данные, поэтому, если модальное окно будет открыто снова, оно должно получить неотредактированные данные.

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

Ответы [ 2 ]

0 голосов
/ 27 марта 2019

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

Если permissions содержит только примитивы, вы можете сделать что-то вроде этого:

this.statePermissions = JSON.parse(JSON.stringify(this.permissions));

Если permissions относится к определенному типу (т.е. new Permission()), вы можете отобразить его (я думаю, что это чище):

this.statePermissions = this.permissions.map(x => new Permission(x.propA, x.propB, etc.));

Таким образом, каждый клонированный объект в statePermissions будет иметь те же свойства, что и объект, из которого он скопирован в permissions, но он независим, поэтому изменения не повлияют на родительский объект, из которого он был создан.

В этом посте есть еще несколько способов .

0 голосов
/ 26 марта 2019

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

Попробуйте переместить ваше присваивание в локальную переменную на хук mounted() или, что еще лучше, если вы не хотите, чтобы оно реагировало watch ваше свойство: 

watch: {
  permissions(newValue) {
    this.statePermissions = newValue
  }
}

Вам также не нужно ...spread массив, чтобы назначить его массиву.

...