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>
</head>
<body>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"></script>
  <div id="app">
    Users list:
    <ul>
      <li v-for="item in items">Name: <input type="text" v-model="item.name"/><br/>Slug: {{ kebab(item.name) }}<br/><br/></li>
    </ul>
    <button @click="items.push(_.clone(item_prototype))">Add item</button>
  </div>
</body>
</html>
 
var v = new Vue({
  el: "#app",
  data: {
    items: [
      {id: 1, name: "Sebastián from Argentina"},
      {id: 2, name: "Gerardo from France"}
    ],
    item_prototype: {id: null, name: ""} 
  },
  methods: {
    kebab: function(a){return _.kebabCase(a); }
  }
})
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers