Question

我在来自undefined

的控制台中收到ready()

我正在尝试将值从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>

编辑：

家长Vue

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

在Vue 2.0中不推荐使用

ready。您需要使用mounted代替ready()

从1.x迁移的参考：https://vuejs.org/guide/migration.html#ready-replaced

另一个潜在的问题：你的users是一个数组项吗？如果它是一个对象，那么您可以考虑将其更恰当地命名为user_info。但是，如果您将单个用户信息传递到users并且上面有name参数，那么您的代码应该在技术上有用。

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

编辑：问题更改后修改

感谢您提供Parent组件。我想我现在可以看到这个问题：

假设您的$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调用。

在ready（）中访问prop属性？

1 个答案: