Question

我正在制作基于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，可在其中定义“路由器视图”页面。

Answer 1

乍一看，有两点引人注目：

this.axios在我看来错了（不知道您的完整组件的外观）。您可以将axios导入每个需要使用的.vue文件中，也可以可以将其全局导入。.
您似乎错过了)通话中的结束语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>

Answer 2

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

未定义VueJS Router View反应性道具

2 个答案: