Question

我正在将一些数据值传递到组件中，但是当我尝试渲染该组件时，数据无法正确接收。我收到一条错误消息：

无法读取Proxy.render中未定义的属性“ title”（在 ./node_modules/cache-loader/dist/cjs.js？

我确定要接收的数据是正确的，因为一秒钟后数据正确加载到页面上。但是，我需要在页面加载时加载数据，因为我计划实现编辑功能。我在整个项目的不同部分都做了类似的事情，并且效果很好。我不确定为什么会在这里引发错误。

我试图更改在什么时候可以识别数据，传递具体的数据值等。但是没有任何效果。

组件：

<script>
    let socket = new WebSocket("wss://myexamplesite.com/websocket")

    console.log("Attempting Websocket Connection")

    socket.onopen = () => {
        console.log("Successfully Connected");
        socket.send("Hi From the Client!")
    }

    socket.onclose = (event) => {
        console.log("Socket Closed Connection: ", event)
    }

    socket.onmessage = (msg) => {
        console.log(msg);
    }

    socket.onerror = (error) => {
        console.log("Socket Error: ", error)
    }
</script>

父母：

<template>
    <div class="column">
        <h1 class="title">{{ this.relevantData.title }}</h1>
        <div class="buttons are-large">
            <a class="button is-info is-outlined" @click="journalPush()">Journal</a>
            <a class="button is-success">Edit</a>
        </div>
    </div>
</template>
<script>
    import router from "@/router.js";

    export default {
    props: ['relevantData'],
    methods: {
        journalPush() {
            router.push("/recipes/" + this.relevantData.documentID + "/journal");
        }
    },
    mounted() {
        console.log(this.relevantData);
    }
}
</script>

我希望当我在安装部分的组件中记录相关数据时，我应该能够立即看到所有数据。

Answer 1

如果您需要数据存在于mounted挂钩中，则需要使用v-if来延迟组件的创建：

<Content v-if="sidebarData" :relevantData="sidebarData"/>

在没有v-if的情况下，Content组件将在从服务器加载sidebarData之前立即创建并呈现。

传递到组件的道具不渲染

1 个答案: