VueJS路由器查看反应道具未定义

Posted 2023-02-22

【中文标题】VueJS路由器查看反应道具未定义

【英文标题】：VueJS Router View reactive prop not defined

【发布时间】：2019-10-05 14:43:11

【问题描述】：

我正在制作基于 Router-View 的应用程序，并尝试创建填充来自反应属性的数据的表。到目前为止，我收到了一个未定义的错误：

“属性或方法“消息”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

这是脚本：

<script>

import axios from 'axios'

export default 
    data () 
        return 
            messages : [],
        
    ,
    mounted() 
        this.getMessages()
    ,
    methods: 
        getMessages() 
            let uri = 'http://localhost:8000/api/messages'
            axios.get(uri).then(response => 
                this.messages = response.data.data
            )
        ,
    

这是模板：

<table class="table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Content</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="message in messages">
            <td> message.title </td>
        </tr>
    </tbody>
</table>

我已经阅读了 VueJS 文档，查看了其他一些项目，我确信它是正确的。我有父 App.js，我在其中定义了 Router-View 页面。

【问题讨论】：

如果您在this.messages = response.data.data 上方的行中执行console.log(response.data.data) 会得到什么？

你试过撒谎吗..<tbody v-if="messages"> 或<tbody v-if="messages.length > 0"> ..？

@BenjaminBeganović 我确定长度是 1

嗯，那是> 0，对吧？你使用 Vue devtools 扩展吗？

@BenjaminBeganović 是的length > 0 is True。我正在使用 Vue Dev Extensions，它似乎在消息组件中没有任何属性。我正在使用侧边栏组件，它是唯一具有属性的组件。此外，消息组件中的控制台日志不起作用，但它在主组件中起作用

【参考方案1】：

乍一看，有两点很突出：

this.axios 在我看来是错误的（不知道您的完整组件的外观）。您可以在每个需要使用它的 .vue 文件中导入 axios，也可以全局导入它。.. 您似乎错过了axios 通话结束时的)..

---

可能的解决方案：

Import Axios globally

您的组件应如下所示：

import axios from  'axios'

export default 
    data() 
        return 
            messages: []
        
    ,
    mounted() 
        this.getMessages()
    ,
    methods: 
        // could also give this a shot...although I doubt this is the issue
        // var self = this;
        getMessages() 
            let uri = 'http://localhost:8000/api/messages';
            axios.get(uri).then(response => 
                // is anything shown here?
                console.log(response);
                return response.data.data;
                // or..
                // return response.data;
            ).catch(err => 
                alert(err);
            ).then(data => 
                this.messages = data;
                // or...
                // self.messages = data;
            );
        
    

您也可以尝试在循环内的项目中添加key..

<tr v-for="(message, index) in messages" :key="index">
    <td> message.title </td>
</tr>

【讨论】：

我发布此内容时正在使用手机，这就是为什么它看起来未完成的原因。我现在更新了线程。请检查，我已经应用了您的解决方案，但没有奏效。另外，当我尝试console.log(response.data.data)

时，我在控制台中没有得到任何东西

如果你做console.log(response.data)怎么办？它不起作用的原因是response.data.data 中没有任何内容可显示。 API 是否正常工作？如果直接/手动查询，是否可以检索数据？

是的 API 正在工作，console.log 没有执行它甚至没有显示空数组或新行或其他任何内容

@GhoSTBG 如果您的日志输出为空，请尝试捕获任何可能的错误：.catch((err) => console.log(err); )

@GhoSTBG 我还更新了我的答案，你可以尝试一些其他的事情..

【参考方案2】：

问题是我忘记关闭文档末尾的标签了。