Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
  
</head>
<body>
 <div id="app">
   <label>
     Nouveau Hobby:<input v-model="nouveauHobby">
   </label>
   <button @click="addHobby()">Ajouter</button>
   <p>Nombre de hobbies : {{hobbies.length}}</p>
 <h1 >Liste des hobbies avec composant custom</h1>
   <ul>
     <app-hobby   
          v-for="h, index in hobbies"
          :nom="h.name"
          @hobbyclicked="removeHobby(index)"
     ></app-hobby>   
   </ul>
   
   <h1>Liste des hobbies</h1>
   <ul>
     <li v-for="(h,index) in hobbies"
         @click="removeHobby(index)"
         :style="{color:getColor(index)}"
         :class="{bordure:(index ==5)}"
     >
       index:{{index}}, nom : {{h.name}}
       
     </li>
   </ul>
 </div>
  
</body>
</html>
 
.bordure {
  border:3px dashed orange;
}
 
​
Vue.component('app-hobby', 
{
       template: '<li @click="removeHobbyLocal()">{{nom}}</li>',
       props: ['nom'],
       data: () => {
          return {
          }
       },
  methods: {
    removeHobbyLocal() {
      console.log("remove hobby local");
      // on envoie à d'éventuels écouteurs (autres composants)
      // un message custom "restaurantclicked"
       this.$emit('hobbyclicked', this.nom);
    }
  }
});
​
new Vue({
  el:"#app",
  data: {
    nouveauHobby: "",
    hobbies: []
  },
  mounted() {
    console.log("Avant affichage, typiquement ici on fait une requête AJAX");
    this.getDataFromServer();
  },
  methods: {
    getDataFromServer() {
      let url = "https://jsonplaceholder.typicode.com/users";
      fetch(url)
      .then(reponseEnJson => {
           return reponseEnJson.json(); // transforme en objet js
      }).then(users => {
        this.hobbies = users;
      });
    },
    addHobby() {
     console.log("add hobby " + this.nouveauHobby);
     this.hobbies.push({
       id: _.uniqueId("hobby-"),
       nom: this.nouveauHobby
     });
    },
    removeHobby(index) {
      console.log("Remove Hobby vue principale");
      this.hobbies.splice(index, 1);
    },
    getColor(index) {
      return index%2?'red':'green';
    }
  }
})
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
micbuffapro
0viewers