Как вернуть vue.js 'Created' value [duplicate]

1

Я получаю данные API JSON для виджета погоды. Это возвращает ноль. Я получаю данные JSON очень хорошо. Но я не могу справиться с этим значением.

Здесь мой 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>

здесь мой 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);
        });
      },
   })
});
Теги:
vue.js

2 ответа

1

Вы теряете this контекст в $.getJSON вызове $.getJSON: он не указывает на экземпляр Vue внутри вызова функции.

Вы должны эфир связать this чтобы функционировать напрямую:

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

Или используйте функцию жирной стрелки:

$.getJSON(url, (json) => {
  //...
});
  • 1
    Это правильный ответ. Кроме того, похоже, что он должен переместить <p v-if="isLoading">Loading</p> в div#app .
  • 0
    @ chrisg86 Да, верно, пропустил это :)
Показать ещё 1 комментарий
0

Область this изменения внутри функции getJSON. Вы должны сохранить родителя 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);
        });

Ещё вопросы

Сообщество Overcoder
Наверх
Меню