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文件中。我执行对后端的fetch，它成功地从DB返回正确的数据。我成功地保存了返回到文件的data()部分的数据。接下来，我从正确的页面导入一个组件(代码如下)，将其作为组件添加到模板中，并使用v绑定从这个页面的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模型将data()中的"description“内容绑定到textarea的内容中。因此，当我编辑文本区域并单击submit时，函数会将数据发送给父组件，该组件将触发一个函数，该函数使用来自该组件文本区域的新数据更新父数据()。这部分工作得很完美。

但是，我无法理解的部分是父组件何时执行fetch并将响应绑定到子组件，为什么加载时响应没有显示在textarea中。

我已经做了完全相同的事情，对其他许多组件，它的工作很好，在这批。唯一的区别是，对于这个批次，execute函数用一个数据数组返回一个响应，我使用v-for(xs中的x )，然后将data()的属性绑定到组件x，这是唯一的区别。在上面的代码中，我缺少哪些内容来加载从父组件中发送的数据，并将其绑定到具有v模型的子组件中的textarea。在data()中，我让它返回描述: this.$props.profile.desc，但它不是用profile.desc初始化描述，这里是$@！我已经盯着密码看了两天了，一直在尝试不同的事情。

Answer 1

挂载函数 在实例被挂载后调用，其中el被新创建的vm.$el替换。如果根实例被挂载到文档中的元素中，则在调用挂载时，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>

1. 你把async/await和.then()混在一起。它应该是：

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

    this.updateProfileData(response.data)
},