How to return vue.js 'Created' value

Question

I'm getting api json data for weather widget. It's return null. I am getting json data very well. But i can't handle this value.

Here my html;

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script> 
</head>
<body>
  <script>
    /* $(document).ready(function(){
      $.getJSON(url, function(json){
        console.log(json.location.name);
      })
    })/*/
  </script>
  <div id="app" >{{Country}}</div>
  <p v-if="isLoading">Loading</p>
  <script type="text/javascript" src="./js/app.js"></script>
</body>     
</html>

here my js;

window.addEventListener('load',()=>{
  var app = new Vue ({
    el: '#app',
    data:{
        Country : null,
        Temp : null,
        Icon : null,
        isLoading : true,
    },
    created(){
      var url ="http://api.apixu.com/v1/current.json?key=a69259fba9904700964121622190801&q=Nazilli";
        $.getJSON(url,function(json){
            console.log(json);
            this.isLoading = false;
            this.Country = json.location.name;
            console.log(this.Country);
        });
      },
   })
});

score 1 · Answer 1 · answered Jan 09 '19 at 19:26

1

You're losing this context in $.getJSON callback: it doesn't point to Vue instance inside function call.

You should ether bind this to function directly:

$.getJSON(url, (function (json) {
  //...
}).bind(this));

Or use fat arrow function:

$.getJSON(url, (json) => {
  //...
});

answered Jan 09 '19 at 19:26

Styx

9,863
8
43
53

1

This is the correct answer. Besides that it looks like he has to move `
Loading
` into the `div#app`. – chrisg86 Jan 09 '19 at 19:30
@chrisg86 Yes, that's right, missed it :) – Styx Jan 09 '19 at 19:33
You're awesome ! thx dude – Mert Jan 12 '19 at 06:37

score -1 · Accepted Answer · answered Jan 09 '19 at 19:26

The scope of this change inside getJSON function. You must save the parent this

var url ="http://api.apixu.com/v1/current.json?key=a69259fba9904700964121622190801&q=Nazilli";
var me = this; // save this in me variable
        $.getJSON(url,function(json){
            console.log(json);
            me.isLoading = false;
            me.Country = json.location.name; // use me instead this
            console.log(me.Country);
        });

How to return vue.js 'Created' value

2 Answers2