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

Question

如何映射 JSON 对象与变量？我不确定我的编码是否正确。我刚开始学习 Vuejs。请查看我的编码我想将 jSON 数据映射到 'country' 变量。

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

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

How to mapping JSON Object with VueJS and AXIOS

json

vue.js

axios