title: How to mapping JSON Object with VueJS and AXIOS
body: <p>How to mapping the JSON Object with the variable? I am not sure that my coding is correct or not.
  I just begin study in Vuejs.
  Please see my coding I want to map jSON data to the 'country' variable.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  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);
    });
     }
    })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;
  &lt;div id="el"&gt;
  &lt;ul&gt;
          &lt;li v-for="item in country"&gt;
            {{ item.country_id }}  -  {{ item.title }}
          &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/LCFPQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LCFPQ.png" alt="Here is my JSON "></a></p>
  
  <p>Here is my JSON data</p>