Инициализировать объект атрибута данных с помощью объекта prop, переданного от родителя

Question

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

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

  /* PARENT */
  <template>
    <CompanyInfo :editedClient="editedClient" />
  </template>
  <script>
    import CompanyInfo from './CompanyInfo.vue'
    export default {
      name: 'Client',
      components: {
        'CompanyInfo': CompanyInfo
      },
      data: () => ({
        editedClient: {
          name: 'aaaa',
          website: '',
          locations: [],
          contacts: [
              {
                  firstName: '',
                  lastName: '',
                  emails: [{ email: '' }],
                  phoneNumbers: [{ phoneNumber: ''}],
                  notes: []
              }
          ]
        },
      })
    }
  </script>


 /* CHILD */
 <template></template>
 <script>
   export default {
     name: 'CompanyInfo',
     data: () => {
       props: [ 'editedClient' ],
       companyInfo: {
         name: this.editedClient.name, //this throws an error when directly initialized like this
         website: this.editedClient.email, //the error says that 'this' is undefined
         locations: this.editedClient.locations //tried initializing this with mounted() hook
       }
     },
     beforeCreate() {
       console.log(this.editedClient.name) // this prints undefined to the console
     }
   }
 </script>

Answer 1

Для этого можно использовать вычисленное свойство в vue. И реквизит получен за пределами свойства данных

/* CHILD */
 <template></template>
 <script>
   export default {
     name: 'CompanyInfo',
     props: {
       editedClient: {
         type: Object,
         default: () => {
          name: '',
          website: '',
          locations: ''
         }
       }
     },
     computed: {
       companyInfo: {
         get() {
           return {
             name: this.editedClient.name,
             website: this.editedClient.email,
             locations: this.editedClient.locations
           }
         }
       }
     },
     data: () => {
           },
     mounted() {
       console.log(this.companyInfo.name)
     }
   }
 </script>