Я получаю данные 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);
});
},
})
});
Вы теряете this
контекст в $.getJSON
вызове $.getJSON
: он не указывает на экземпляр Vue внутри вызова функции.
Вы должны эфир связать this
чтобы функционировать напрямую:
$.getJSON(url, (function (json) {
//...
}).bind(this));
Или используйте функцию жирной стрелки:
$.getJSON(url, (json) => {
//...
});
Область 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);
});
<p v-if="isLoading">Loading</p>
вdiv#app
.