Question

我有一个从用户那里检索数据的组件。该对象由ID，用户名和电子邮件组成。我有一个用于编辑这些值和更新它们的组件。

在父组件“ parentComponent”中，我从URL检索数据：

getUser(event) {
    /*Check for validations on input and then call the api
    let validFlag = !isNaN(this.userId);
    if (validFlag) {
        axios
          .get("http://localhost:4000/api/users/" + this.userId)
          .then(response => {
          console.log(response);
          this.user = response.data.data;
          /*If needed to clear the userId*/
          this.userId = "";
         });
         } else {
           /*input value is not a number -do something about it (alert/notify)*/
           this.userId = "";
           this.isExistingUser = !this.isExistingUser;
           console.log("User do not exist : " + this.isExistingUser)
        }
     }
},

此方法允许我在ParentComponent中显示信息：

<th scope="row"> {{ user["id"] }}</th>
<td>{{ user["username"] }}</td>
<td>{{ user["email"] }} </td>

我的目标是将用户传递给子组件。这就是为什么我在“ ParentComponent”中定义道具的原因：

props: {
    userToEdit: {
       type: Object,
       default: {
            editIUsername: this.username,
            editIEmail: this.email
        }
    }
},

在模板中，我绑定了UserToEdit：

<child-component v-bind="userToEdit"></child-component>

实际上，我无法在子组件中检索数据，并且收到诸如的错误消息，并且我正在寻找如何将“ id”也传递给子组件：

未捕获的TypeError：无法读取未定义的属性“用户名”

将数据从组件传递到另一个组件

0 个答案: