vuejs & http.get call not working

Question

I'm starting to work with vuejs and I'm trying to make a http get call without sucess. I've tried several example showing how to do that but I get the following error in my console: this.$http is undefined.

html

<!doctype html>
<html>
    <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/css/uikit.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/js/uikit.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.21/js/uikit-icons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css"/>


     <script src="https://unpkg.com/vue"></script>


    </head>
    <body>

        <div id="app">
            <p v-bind:title='message'>
                {{ message }}
            <p>
            <button v-on:click='changeView("matrice")'>get data</button>


        </div>
    </body>
         <script type="text/javascript" src="/front/lala_web/matrice.js"></script>
</html>

js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Empty data'
  },
  methods:{
    changeView: function(v){
        this.$http.get('/view/'+v)
            .then(function(resp){
                this.message = resp.data;
            })
            .catch(function(){alert('Error')});
        }
    }
})

I'been able to get a http get call working using the following js, but doing so doesn't change data.message value of vuejs and I get the following error data is not defined.

js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Empty data'
  },
  methods:{
    changeView: function(v){
        var viewUrl = '/view/'

        $.ajax({
           url: viewUrl+v,
           method: 'GET',
           success: function (resp) {
                if (resp.error == false){
                    console.log(resp)
                    data.message = resp.data
                }

           },
           error: function (error) {
               console.log(error)

           }
       });

    }
  }
})

this.$http is typically added from a plugin called VueResource — Bert
– Bert, Commented May 24, 2017 at 20:06

thanksd · Accepted Answer · 2017-05-24 20:09:20Z

1

You need to reference this.message not data.message. Also, you'll need to save a reference to this outside the scope of the ajax call, since this in the success handler doesn't refer to the Vue instance:

changeView: function(v){
    var viewUrl = '/view/'
    var self = this;

    $.ajax({
       url: viewUrl+v,
       method: 'GET',
       success: function (resp) {
            if (resp.error == false){
                console.log(resp)
                self.message = resp.data
            }
       },
       error: function (error) {
           console.log(error)
       }
   });
}

edited May 24, 2017 at 20:09

answered May 24, 2017 at 20:05

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

thanksd Over a year ago

@BertEvans yep, I misunderstood what was in his data object. Updated

Bert Over a year ago

@ArtFilPortraitArtistetisseu If this solved your problem you should upvote and accept it.

Collectives™ on Stack Overflow

vuejs & http.get call not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related