0

I'm learning Vue at the moment, and I'm now at the point where I want to make a call to my backend and pull data in JSON format. I've followed multiple Vue tutorials online (admittedly they are all from Laracast) and they each say to use $.get to make a get request to the backend. However, I'm getting a $ is undefined error. From reading, it seems this may be because $ is a jQuery attribute, but if that's the case, how come these tutorials haven't mentioned anything about importing or setting up jQuery? What would be the Vue-only way of doing a simple get request?

HTML:

<html>
<head><title>Tests</title>
</head>
<body>
<div id="app">
    <div v-for="item in queue">{{ item }}</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./app.js"></script>
</body>
</html>

JS file:

new Vue({
    el: '#app',
    data: {
        queue: [],
        interval: null,
    },
    methods: {
        loadData: function () {
            $.get('localhost:4567/getQueue', function (response) {
                this.queue = response;
            }.bind(this));
        }
    },
    ready: function () {
        this.loadData();

        this.interval = setInterval(function () {
            this.loadData();
        }.bind(this), 3000); 
    },

    beforeDestroy: function(){
        clearInterval(this.interval);
    }
});
Max
  • 597
  • 7
  • 21

1 Answers1

2

Sounds like a hastily written tutorial, adding the jQuery library before or after the Vue library will solve your problems; However, I've found the main Vue examples / tutorials good enough to completely learn Vue.

I'd also highly suggest learning the .vue template (Single File Components). As later on it becomes much more valuable to your architecture and speeds up development quite a bit.

If you're interested in more Vue resources check out this site.

tony19
  • 125,647
  • 18
  • 229
  • 307
Nijikokun
  • 1,514
  • 1
  • 15
  • 22