Vue - доступ к реквизитам в дочернем компоненте

Question

У меня есть дочерний компонент Vue, который получает данные от родителя через реквизит.То, что я хочу, чтобы установить значение свойства "name", как показано ниже:

<template>
    <input v-model="name" type="text" placeholder="Name" id="name">   <!-- this does not work -->

    {{ this.productdata.name }} <!-- this works -->
    {{ name }} <!-- this DOES NOT work -->
</template>

export default {
        data() {
            return {
                name: this.productdata.name
            }
        },
        props: ['productdata'],
        methods: {
            setProductData()
            {
                this.name = this.productdata.name;
            }
        },
        mounted() {
                // because "name: this.productdata.name" doesn't work I tried to make it like below... No success.
                this.setProductData();
        },
}

Я думаю, это как-то связано с тем, что дочерний компонент Vue становится реактивным.У меня есть готовое рабочее решение, но оно совсем не элегантно:

mounted() {
            setTimeout(() => {
                this.setProductData();
            }, 2000);
        },

Есть предложения, как сделать это лучше?

Answer 1

Вы можете изменить хук mounted на созданный

created() {
            this.setProductData();
        }

Также вы можете использовать Вычисленные свойства и наблюдатели

computed: {
    name: function () {
      return this.productdata ? this.productdata.name : '';
    }
  }

Answer 2

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

export defaults {
...
  watch: {  
    productdata: function () {
      this.setProductData()
    }  
  },
...
}