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

Question

如何将 JSON 对象与变量进行映射？我不确定我的编码是否正确。 我刚开始学习 Vuejs。 请参阅我的编码我想将 JSON 数据映射到“国家”变量。

  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>

这是我的 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);
    });
  }

self 被用来维护对原始 this 的引用，即使上下文正在发生变化。这是事件处理程序中经常使用的一种技术（尤其是在闭包中）。