Vue base - components, template, method, axiosJS

by serg_x

HTML

<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<template id="comp-1-template">
  <p><span @click="makeSome">{{user.name}}</span> — {{user.address.city}}, {{user.address.street}}, {{user.address.suite}}</p>
</template>


<div id="vue_container">
  
  <div>
    <comp-1
       v-for="val in users"
    
    :user="val"
    ></comp-1>
  </div>

  
</div>

CSS

span{
  border-bottom: 1px dashed;
  cursor: pointer;
}

Vue

Vue.component('comp-1', {
    template: '#comp-1-template',
    props: [
      'user'
    ],
    methods: {
      makeSome: function(){
        alert("email: "+ this.user.email);
      }
    }
  });

var vm = new Vue({
  el: "#vue_container",
  data: {
    users: []
  },
  created () {
    var vm = this;
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(function (response) {
      	//console.log(response.data);
        vm.users = response.data
      })
  }
});