Ako mapovať JSON Objekt s VueJS a AXIOS - json, vue.js, axios

Ako mapovať objekt JSON pomocou premennej? Nie som si istý, či je moje kódovanie správne alebo nie. Práve som začal študovať vo Vuejsi. Prečítajte si moje kódovanie, ktoré chcem mapovať údaje jSON na premennú „country“.

  var appZone = new Vue({
el: "#el",
data() {
return {
country:  [],
shoppingItems: [
{name: "apple", price: "10"},
{name: "orange", price: "12"}
]
}
},
mounted() {
axios.get("/wp-json/tour-api/v1/search/11361")
.then(function (response) {
console.log(response);
this.country = response.json();

})
.catch(function (error) {
console.log(error);
});
}
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="el">
<ul>
<li v-for="item in country">
{{ item.country_id }}  -  {{ item.title }}
</li>
</ul>
</div>

Tu sú moje údaje JSON

odpovede:

Zmeňte pripojenú funkciu na

mounted() {
var self = this
axios.get("/wp-json/tour-api/v1/search/11361")
.then(function (response) {
console.log(response);
self.country = response.data;
})
.catch(function (error) {
console.log(error);
});
}

ja sa používa na udržanie odkazu na originál, aj keď sa mení kontext. Je to technika, ktorá sa často používa pri vybavovaní udalostí (najmä pri uzávierkach).