[Vuejs]-How to setup express route res.json(data) object and display the response in vue $HTTP call?

by

0👍

✅

Looking at JSON data now, and see that you don’t have comments propery in response.

Try change this:

<div id="app">
    <ul>
        <li v-for="item in items">
            {{ item.comments }}
        </li>
    </ul>
</div>

to this

<div id="app">
    <ul>
        <li v-for="item in items">
            {{ item.title }}
        </li>
    </ul>
</div>

And you should see your your data, rendered on page.

0👍

It is happening because your this is not pointing to correct scope, scope of this changes inside an this.$http call, so you just have to do something like following:

    methods: {
        fetchData() {
            var self = this
            this.$http.get('http://localhost:1337/form')
              .then(result => {
                  self.items = result.data
              })

You can also check my similar answer here and here.

0👍

The express route handle needs to return response in json format so write your route like this:

res.json(responseObject)

In your html Vue tag, follow the code in the example and just change the {{item.fieldname}} to display whatever field name you need to display.

Credit goes to @Belmin for this answer.

Leave a comment