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

Posted 2023-02-22

【中文标题】如何使用 VueJS 和 AXIOS 映射 JSON 对象

【英文标题】：How to mapping JSON Object with VueJS and AXIOS

【发布时间】：2018-01-29 08:55:44

【问题描述】：

如何将 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 数据

【参考方案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 的引用，即使上下文正在发生变化。这是事件处理程序中经常使用的一种技术（尤其是在闭包中）。

【讨论】：

你的意思是 'var self = this' 吗？

应该是 response.data 而不是 response.json()