58 lines
1.4 KiB
Vue
58 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<table>
|
||
|
|
<tr v-for="contact in contacts">
|
||
|
|
<td>{{contact.firstname}}</td>
|
||
|
|
<td>{{contact.lastname}}</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<button @click="addContact">Add</button>
|
||
|
|
<label>#contacts {{counter}}</label>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script> // la balise script dans ce fichier vue, est un peu comme une classe Contacts
|
||
|
|
// namespace test1/Contacts
|
||
|
|
import Vue from 'vue'
|
||
|
|
import VueResource from 'vue-resource'
|
||
|
|
|
||
|
|
// injection de dépendance pour dealer du REST json
|
||
|
|
Vue.use(VueResource)
|
||
|
|
|
||
|
|
export default{
|
||
|
|
// initialise les données
|
||
|
|
data () {
|
||
|
|
return { // constructeur du tableau-objet vide 'contacts' qui est passé à App.vue
|
||
|
|
contacts: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// Rest GET json
|
||
|
|
http: {
|
||
|
|
root: 'http://localhost:3000'
|
||
|
|
},
|
||
|
|
// méthodes
|
||
|
|
methods: {
|
||
|
|
addContact(){
|
||
|
|
this.contacts.push({"firstname":"Lisa", "lastname":"Simpson", "age":"10"})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// traitements
|
||
|
|
computed:{
|
||
|
|
counter(){
|
||
|
|
return this.contacts.length
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// on dirait un setter
|
||
|
|
mounted() {
|
||
|
|
this.$resource('contacts').get().then((response) => {
|
||
|
|
this.contacts = response.data
|
||
|
|
}, (response) => {
|
||
|
|
console.log('erreur', response);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|