VueJS: Как инициализировать данные, чтобы они отображались в моем шаблоне при загрузке компонента

Question

Это сводит меня с ума!

//ProfilePage.vue
<template>
    <div>
        <p>{{ this.$data.profile.desc }}</p>
        <profileImage v-bind:profile="profile"></profileImage>
        <profileText v-bind:profile="profile" v-on:updateData="updateDesc"></profileText>
    </div>
</template>

<script>
import profileText from './ProfileText.vue';
import profileImage from './ProfileImage.vue';
export default {
    name: 'profilePage',
    component: {
        profileText,
        profileImage
    },
    data() {
        return {
            profile: {
                image: '',
                desc: ''
            }
        }
    },
    created() {
        this.fetchProfile();
    },
    methods: {
        async fetchProfile() {
            const uri = 'http://localhost:8000/api/......get';
            const response = await axios.get(uri);
            .then(response => this.updateProfileData(response.data))
        },
        updateProfileData(data) {
            this.$data.profile.image = data['image'];
            this.$data.profile.desc = data['description'];
        },
        updateDesc(data) {
            this.$data.profile.desc = data.desc;
        },
    }
}
</script>

<style scoped>
</style>

В приведенном выше файле vue. Я выполняю выборку для серверной части, которая успешно возвращает правильные данные из БД. Я успешно сохраняю данные, возвращенные в data () часть файла. Затем я импортирую компонент (код для которого приведен ниже) с правильной страницы, добавляю его в качестве компонента и добавляю в шаблон и использую v-bind для передачи профиля из части data () этой страницы. Теперь импортированный / дочерний компонент выглядит следующим образом:

//ProfileText.vue
<template>
    <div>
        <form @submit="update">
            <textarea v-model="description"></textarea>
            <button type="submit">Submit</button>
        </form>
    <div>
<template>

<script>
export default{
    name: "profileText",
    props: ["profile"],
    data() {
        return {
            description: this.$props.profile.desc
        }
    },
    methods: {
        update(e) {
            e.preventDefault();
            const newData = {
                desc: this.$data.description
            }
            this.$emit('updateData', newData);
        }
    }
}
</script>

<style scoped>
</style>

Я использую v-модель, чтобы связать содержимое «description» в data () с содержимым текстовой области. У меня это так, когда я редактирую текстовую область и нажимаю кнопку отправки, функция отправляет данные в родительский компонент, который запускает функцию, которая обновляет родительские данные () новыми данными из текстовой области этого компонента. Эта часть работает отлично.

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

Я сделал то же самое с другой партией компонентов, и она отлично работает на этой партии. Единственное отличие состоит в том, что с этим лотом функция execute возвращает ответ с массивом данных, и я использую v-for (x в xs), а затем связываю атрибуты data () с компонентом x. Это единственная разница. Чего мне не хватает в приведенном выше коде, чтобы загрузить данные, отправленные в «профиле» из родительского компонента с помощью v-bind, в текстовое поле в дочернем компоненте с помощью v-модели. В data () мне нужно вернуть описание: this. $ Props.profile.des c, но оно не инициализирует описание с profile.des c - здесь можно сходить с ума $ @! I Два дня смотрел на код, пробуя разные вещи.

Answer 1

установлен Функция

Вызывается после монтирования экземпляра, где el заменяется вновь созданным vm. $ El. Если экземпляр root монтируется в элементе документа, vm. $ El также будет присутствовать в документе при вызове смонтированного.

Обратите внимание, что смонтированный не гарантирует, что все дочерние компоненты также были смонтированы. , Если вы хотите подождать, пока весь вид будет обработан, вы можете использовать vm. $ NextTick внутри смонтированного:

mounted: function () { console.log('component mounted'); }

Этот хук не вызывается во время рендеринга на стороне сервера.

Источник

Жизненный цикл компонента

Answer 2

Несколько вещей:

1. Ваш синтаксис содержит ошибки в файле ProfileText.vue. Отсутствуют закрывающие template и div теги

<template>
    <div>
        <form @submit="update">
            <textarea v-model="description"></textarea>
            <button type="submit">Submit</button>
        </form>
    </div>
</template>

Вы смешиваете async/await и .then(). Должно быть:

async fetchProfile() {
    const uri = 'http://localhost:8000/api/......get';
    const response = await axios.get(uri);

    this.updateProfileData(response.data)
},