Проблема с дочерним значением из компонента Vue, изменяющим родительское значение

Question

У меня есть массив, который я использую для заполнения компонента Dialog Vue. У меня есть:

           basicInfo: [{ firstName: "John" , lastName: "Doe" }],

          <basicInfoForm v-model="showBasicInfoForm" :basicInfo="newbasicInfo[0]"></basicInfoForm>

на родительском компьютере. У меня есть

       {{basicInfo[0].firstName + ' ' + basicInfo[0].lastName}}

. У меня есть кнопка, которая вызывает компонент формы и открывает диалоговое окно, в котором можно редактировать. Моя проблема в том, что все изменения в диалоге также немедленно отображаются на родительском. Я бы хотел, чтобы в Детском диалоге была кнопка отмены, чтобы не было никаких изменений. Я клонировал массив, прежде чем передать его:

       this.newbasicInfo = this.basicInfo.slice();

и в дочернем диалоге

      <v-text-field
      v-model="basicInfo.firstName"
      label="First Name"
      class="input-name styled-input"
       ></v-text-field> 

      props: {
      value: Boolean,
      basicInfo: Array
      },

Моя проблема заключается в том, что я могу видеть каждое нажатие клавиши по мере внесения изменений, так что естьнет способа вернуться к оригиналу, если выбрана отмена. Я новичок в Vue и Components, так что я мог что-то напортачить. Почему изменения вносятся как в массив basicInfo, так и в массив newbasicInfo одновременно.

Answer 1

Ваш метод клонирования не работает с массивом объектов:

const basicInfo = [{ firstName: "John" , lastName: "Doe" }]
const newbasicInfo = basicInfo.slice()

Этот метод создает "мелкую копию" - это означает, что он работает с числами, строками и т. Д. но на самом деле не создает клон объектов. Клонированные объекты таким образом сохраняют свои ссылки, поэтому они фактически будут «теми же» объектами, что и в исходном массиве.

const basicInfo = [{ firstName: "John" , lastName: "Doe" }]
const newbasicInfo = JSON.parse(JSON.stringify(basicInfo))

Этот метод создает «глубокую копию» - всеон будет клонирован, независимо от того, насколько «глубоко» они вложены.

Если у вас есть массив простых значений, поверхностная копия более эффективна , но если у вас есть объекты вваш массив вам нужен глубокая копия .

Итак, это не проблема Vue, а более общий вопрос JavaScript .

Вот небольшой фрагмент, чтобы проиллюстрировать разницу:

const basicInfo1 = [{
  firstName: "John",
  lastName: "Doe"
}]
const newbasicInfo1 = basicInfo1.slice()

newbasicInfo1[0].firstName = "Johnnyboy"
console.log('basicInfo1: ', basicInfo1)
console.log('newbasicInfo1: ', newbasicInfo1)



const basicInfo2 = [{
  firstName: "John",
  lastName: "Doe"
}]
const newbasicInfo2 = JSON.parse(JSON.stringify(basicInfo2))

newbasicInfo2[0].firstName = "Johnnyboy"
console.log('basicInfo2: ', basicInfo2)
console.log('newbasicInfo2: ', newbasicInfo2)

Answer 2

Здесь происходит то, что вы копируете массив по ссылке. Поэтому, когда вы изменяете индекс одного массива, фактически оба изменяются, потому что они имеют одну и ту же ссылку. Что вам нужно сделать, это скопировать массив по значениям.

это легко сделать следующим образом: this.newbasicInfo = JSON.parse(JSON.stringify(this.basicInfo));

Вы можете проверить этот вопрос на SO для получения дополнительной информации: Как вы клонируете массив объектов в Javascript?