如何使用VueJS和AXIOS映射JSON对象

Question

如何使用变量映射JSON对象？我不确定我的编码是否正确。 我刚开始在Vuejs学习。 请参阅我的编码我想将jSON数据映射到＆＃39;国家/地区＆＃39;变量

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是我的JSON数据

Answer 1

将已安装的功能更改为

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

自我被用来维持对原始的引用，即使上下文正在发生变化。它是一种常用于事件处理程序的技术（特别是在闭包中）。