vue.js - How to mapping JSON Object with VueJS and AXIOS -
how mapping json object variable? not sure coding correct or not. begin study in vuejs. please see coding want map json data 'country' variable.
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> here json data
change mounted function to
mounted() { var self = 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); }); } self being used maintain reference original context changing. it's technique used in event handlers (especially in closures).

Comments
Post a Comment