Search code examples
node.jsmongodbexpressvue.jsvue-resource

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

enter image description here

Actual data in the collection enter image description here

Using express: Mongoose model with mongodb collections called "comments"

var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var Comment = new Schema({
title : String,
});
mongoose.model('comments', Comment);
mongoose.connect('mongodb://localhost/test');

My get route:

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Comment = mongoose.model('comments');


/* GET form. */
router.get('/', function (req, res) {
Comment.find(function (err, comments) {
    res.json(comments);
});
});

My front.html which using vue and vue resource

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js">  `   `</script>`
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script> 
<title>$http access to express route</title>
</head>
<body>
<h1>
    <a href="http://localhost:1337"> Front page</a>
</h1>

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

<script>
    new Vue({

        el: '#app',

        data: {
            items: []
        },

        created() {
            this.fetchData()
        },

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

    });
</script>

</body>
</html>

Comments is not showing in my vue tag. What is the proper way to access the Comment.find(err, comments) object that express send back? The vue resource $http is working when I use a test api like (https://jsonplaceholder.typicode.com/users) but when I try to access my route localhost:1337/form route, it doesn't show anything. Need someone with good knowledge with express routes, vue. I can't find any examples online that demo this in details. It seems that all tutorials online just skip this part.

Do I need to return the results in my route in a different format? Do I need to add the results to a var so I can access by the $http? Do I need to change my route in express?

If anyone with a live example. It would be great to post a link.

Solution

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