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.nom"
          @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.nom}}
       
     </li>
   </ul>
 </div>
  
</body>
</html>
 
.bordure {
  border:2px dashed orange;
}
 
​
Vue.component('app-hobby', 
{
       template: '<li @click="removeHobbyLocal()">{{nom}}</li>',
       props: ['nom'],
       data: () => {
          return {
          }
       },
  methods: {
    removeHobbyLocal() {
      console.log("remove hobby local");
    }
  }
});
​
new Vue({
  el:"#app",
  data: {
    nouveauHobby: "",
    hobbies: [
      {
        id: 1,
        nom: "tennis"
      },
      {
        id:2,
        nom:"foot"
      },
      {
        id:3,
        nom:"jeux vidéo"
      }
    ]
  },
  methods: {
    addHobby() {
     console.log("add hobby " + this.nouveauHobby);
     this.hobbies.push({
       id: _.uniqueId("hobby-"),
       nom: this.nouveauHobby
     });
    },
    removeHobby(index) {
      this.hobbies.splice(index, 1);
    },
    getColor(index) {
      return (index%2)?'green':'red'
    }
  }
})
Output

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

Dismiss x
public
Bin info
micbuffapro
0viewers