Создание локальной копии переданного реквизита в дочернем компоненте в vue.js? - PullRequest
Новая
       67

Создание локальной копии переданного реквизита в дочернем компоненте в vue.js?

0 голосов
/ 22 сентября 2018

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

Есть лив vue.js сделать локальную копию переданного свойства у ребенка?

Я гуглил это, но везде написано, что мы можем достичь этого, делая это. 

 props:["user"],
  data(){
    return {
      localUser: Object.assign({}, this.user)
    }
  }

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

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

Любая информация по этому вопросу будет полезна.

У меня естьтакже читайте где-нибудь, что в In vue @ 2.3.3 ， когда мы хотим передать реквизит от компонента «Отцу к ребёнку», нам нужно вручную создать локальные данные для сохранения реквизита,это делает множество бесполезных дел.

мы можем вручную создать локальные данные, например, так: 

props: ['initialCounter'],
data: function () {
    return { counter: this.initialCounter }
}

, но это не работает и в моем случае.Я использую vue cli 3.0.1 для целей developmnt.

Вот мой код для того же.

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

enter image description here

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

enter image description here

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

1 Ответ

0 голосов
/ 23 сентября 2018

В вашей скрипке дочерний компонент использует Object.assign() для создания копии data, которая является массивом объектов.Однако при этом создается только мелкая копия , поэтому элементы массива будут по-прежнему ссылаться на исходные экземпляры, что приведет к поведению, которое вы видите.

НесколькоРешения для глубокого копирования массива:

  • Используйте JSON.parse(JSON.stringify(this.data)), который достаточно хорошо работает для объектов строк и чисел: 

    data() {
  return {
    local_data: JSON.parse(JSON.stringify(this.data))
  }
}

    ( demo 1)

  • Отобразить объекты в новые: 

    data() {
  return {
    local_data: this.data.map(x => ({...x}))
  }
}

    ( demo 2 )

  • Используйте служебную библиотеку, такую ​​как lodash * cloneDeep

    data() {
  return {
    local_data: _.cloneDeep(this.data)
  }
}

    ( demo 3 )

...