Wie man JSON Object mit VueJS und AXIOS abbildet - json, vue.js, axios

Wie ordne ich das JSON-Objekt der Variablen zu? Ich bin nicht sicher, ob meine Kodierung korrekt ist oder nicht. Ich fange gerade an, in Vuejs zu studieren. Bitte beachten Sie meine Codierung. Ich möchte jSON-Daten der Variablen "country" zuordnen.

  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>

Hier sind meine JSON-Daten

Antworten:

Ändern Sie die angehängte Funktion in

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);
});
}

Selbst wird verwendet, um einen Verweis auf das Original aufrechtzuerhalten, selbst wenn sich der Kontext ändert. Dies ist eine Technik, die häufig in Ereignisbehandlungsroutinen (insbesondere bei Verschlüssen) angewendet wird.