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

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

Popular posts from this blog

python - Operations inside variables -

Generic Map Parameter java -

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -