将 API 请求中的值从一个组件发送到另一个 Vue.JS答案

【问题标题】：Send value from API request from a component to another Vue.JS将 API 请求中的值从一个组件发送到另一个 Vue.JS
【发布时间】：2019-09-12 16:20:41
【问题描述】：

我有一个组件允许从其他 API 中检索数据... 我的模板允许用户输入输入（id）并找到与用户关联的用户。我还有一个动态调用的组件。

<template>
    <div>
        <!-- form -->
        <form>
            <input type="text" v-model="userId"  id="userId">           
            <button type="submit" class="btn btn-primary" @click="getUser($event); !isExistingUser">Get User</button>
        </form>

        <!-- result -->
        <div v-if="!showComponent">
            {{ user["id"] }} {{ user["username"] }} {{ user["email"] }} 
            <button @click="showComponent = !showComponent">Editer</button>&nbsp;&nbsp;
        </div>

        <!-- Edit the user -->
        <div v-if="showComponent">
            <edit-user :toUpdate="updateUser"></edit-user>
        </div>
    </div>
</template>

在脚本部分我有数据和方法：目标是发送我收集的用户并将其发送给更新用户。为此，我创建了一个数据绑定。

我也尝试在 getUser 方法中设置对象的值。我可以显示价值。

<script>
    import axios from "axios";
    import EditUserForUpdate from "./EditUserForUpdate";
    export default {
        name: "FindUser",
        components: {
            "edit-user": EditUserForUpdate
        },
        data() {
            return {
                toUpdate: Object,
                user: null,
                isExistingUser: false,
                userId: "",
                userEmail:"",
                userUsername: "",
                showComponent: false
            };
        },
        methods: {
            getUser(event) {
                axios
                    .get("http://localhost:4000/api/users/" + this.userId)
                    .then(response => {
                        console.log(response);
                        this.user = response.data.data;
                        var toUpdate = {};
                        toUpdate = { upUserName: this.user.username, upUserEmail: this.user.email, upId: this.user.id};
                        console.log(toUpdate);
                    });
            }
        }
    };
</script>

最后在子组件中：

<script>
    export default {
        name: "EditUserForUpdate",
        data: function () {
            return {
                updateUser: ''
            }
        },
        props: {
            updateUser: Object
        },
        methods: {
            beforeMount () {
                var updateUser = this.updateUser // save props data to itself's data and deal with it
                console.log("userToUpdate : " + updateUser);
            }
        }
    }
</script>

我的问题是由于未知原因我没有检索子模块中的数据。

【问题讨论】：

标签： vue.js data-binding

【解决方案1】：

该属性名为toUpdate，而不是updateUser。

在 EditUserForUpdate 组件中相应地更新您的道具：

props: {
  toUpdate: Object
}

当然，本地化该对象以进行操作：

beforeMount() {
  this.updateUser = this.toUpdate
}

【讨论】：