Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <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>
  <title>JS Bin</title>
</head>
<body>
<div id="app">
    <br>
  <label>
    Nom : <input type="text" v-model="nom"> 
  </label>
  <label>
    Cuisine : <input type="text" v-model="cuisine"> 
  </label>
  <button v-on:click="ajouterRestaurant()">Ajouter</button>
  <h1>Liste des restaurants :</h1>
  <ul>
    <li v-for="r, index in restaurants"
        v-on:click="supprimerRestaurant(index)"
    > 
      {{r.nom}}, cuisine : {{r.cuisine}}
    </li> 
  </ul>
<h1>Liste des restaurants avec composant custom:</h1>
  <ul>
    <app-restaurant v-for="r, index in restaurants"
        @restaurantclicked="supprimerRestaurant(index)"
        :nom="r.nom" :cuisine="r.cuisine"
    > 
    </app-restaurant> 
  </ul>
</div>
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
micbuffapro
0viewers