javascript - 在 ready() 中访问 prop 属性？

Question

我在来自 ready() 的控制台中得到 undefined

我正在尝试将值从 this.users.name 复制到 this.userForm.name

我做错了什么？

个人资料用户组件

   <template>
      <input type="text" v-model="userForm.name">
   </template>

<script>
    export default {

        props: ['users'],

        ready() {
            this.userForm.name = this.users.name;
            console.log(this.users.name);
        },

        data: function () {
            return {
                userForm: {
                    name: '',
                    email: '',
                    errors: [],
                },
            }
        },
} 
</script>

HTML:

<profile-user :users="users"></profile-user>

编辑:

父 View

const app = new Vue({
    el: 'body',
    data: {
        users: {}
    },

    ready: function() {
        this.fetchUser();
    },

    methods: {
        fetchUser: function() {
            this.$http.get('/api/user').then(response => this.users = response.json());
        }
    },
});

Answer 1

ready 在 Vue 2.0 中已弃用。您需要使用 mounted 而不是 ready()

从 1.x 迁移的引用:https://vuejs.org/guide/migration.html#ready-replaced

另一个潜在问题:您的 users 是数组项吗？如果它是一个对象，那么你可以考虑将它命名为user_info 更合适。但是，如果您将单个用户信息传递给带有 name 参数的 users，那么您的代码在技术上应该可以工作。

如果您还没有 vue-devtools，现在可能是在开发控制台中安装和调试的好时机:https://github.com/vuejs/vue-devtools

编辑:问题更改后修改

感谢您提供父组件。我想我现在可以看到问题了:

假设您的 $http 调用大约需要 500 毫秒才能完成。因此，父组件中的 this.users 在前 500 毫秒内未定义。但是您的子组件 (profile-user) 已经创建好了。它将尝试访问未定义的 userForm.name，直到服务器响应到来。

为避免该问题，您可以在profile-user组件的模板中进行如下操作:

<template>
    <div v-if="userForm">
        <input type="text" v-model="userForm.name">
    </div>
    <div v-else>
        Loading user data... Please wait
    </div>
</template>

在您的开发环境中，服务器响应可能不会花费太多时间。但是 this.$http 调用仍然是异步的 - 只有在完全创建 profile-user 组件后才会启动 AJAX 调用。