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

【问题标题】：VueJS Router View reactive prop not definedVueJS路由器查看反应道具未定义
【发布时间】：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，它似乎在消息组件中没有任何属性。我正在使用侧边栏组件，它是唯一具有属性的组件。此外，消息组件中的控制台日志不起作用，但它在主组件中起作用

标签： javascript laravel vue.js

【解决方案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】：

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

【讨论】：