VueJS Router View реактивный реквизит не определен

Question

Я делаю приложение на основе Router-View, и я пытаюсь создать таблицу, заполненную данными из реактивного свойства.До сих пор я получаю сообщение об ошибке, которое не определено:

"Свойство или метод" messages "не определен в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данныхили для компонентов на основе классов путем инициализации свойства ".

Вот сценарий:

<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>

IПрочитал документацию VueJS, посмотрел другие проекты и уверен, что это правильно.У меня есть родительский App.js, где я определяю страницу просмотра маршрутизатора.

Answer 1

На первый взгляд выделяются две вещи:

1. this.axios выглядит неправильно для меня (без знания того, как выглядит ваш законченный компонент) .. Вы можете либоимпортируйте axios в каждый .vue файл, который должен использовать его, или вы можете импортировать его глобально ..
2. Вы, похоже, пропускаете закрывающий ) при вызове axios ..

---

Возможные решения:

1. Импорт Axios по всему миру

2. Ваш компонент должен выглядеть примерно так:

   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;
               });
           }
       }
   }
   

3. Вы также можете попробовать добавить key к вашим элементам в цикле ..

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

Answer 2

Проблема заключалась в том, что я забыл закрыть тег в конце документа.