CODEWITHSUNDEEP
javascriptlaravelvue.js
Dimitar D.
Dimitar D.

Reputation: 205

VueJS Router View reactive prop not defined

I'm making Router-View based application and Im trying to create table filled with data from reactive property. So far I'm receiving an error that its not defined:

"Property or method "messages" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property".

Here is the script:

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

And here is the template:

<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've read the VueJS documentation, looked at some other projects and I'm sure it's right. I have parent App.js where I define the Router-View page.

Upvotes: 3

Views: 927

Answers (2)

Dimitar D.
Dimitar D.

Reputation: 205

The problem was that I forgot to close the tag at the end of the document.

Upvotes: 0

Matt Oestreich
Matt Oestreich

Reputation: 8528

At first glance, two things stand out:

  1. this.axios looks wrong to me (w/o knowing how your complete component looks).. You can either import axios in each .vue file that needs to use it, or you can import it globally..
  2. You appear to be missing the closing ) on your axios call..

Possible solutions:

  1. Import Axios globally

  2. Your component should look something like this:

    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. You could also try adding a key to your items within the loop..

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

Upvotes: 1

Related Questions