Vue Simple Component

by Jussia

HTML

<div id="app">
  <template id="addable">
    <li>
      <span>{{field.name}}</span>
      <input type="text" v-model="entity[index].name" />
    </li>
  </template>
  <ul>
    <addable v-for="item in items" :field="item" :index="addableIndex"></addable>
  </ul>
  <pre>
   {{$data.entity | json}}
  </pre>
</div>

CSS

ul {
  margin: 10px;
  padding: 0px;
}

ul li {
  list-style-type: none;
  height: 20px;
}

ul li input[type="text"] {
  padding: 2px;
}

Babel + JSX

Vue.component('addable', {
  template: '#addable',
  props: {
    field: Object,
    index: {
    	type: Number,
      default: 0
    }
  },
  data() {
    return {
      entity: {},
    }
  }
});

new Vue({
  el: '#app',
  data: {
    items: [{
      id: 1,
      name: 'test-1'
    }, {
      id: 2,
      name: 'test-2'
    }, {
      id: 3,
      name: 'test-3'
    }, ],
    addableIndex: 0
  },
  methods:{
   generateIndex () {
     var d = (new Date()).getTime()
     this.addableIndex = d + Math.random()
   }
  },
  created () {
  	this.generateIndex()
  }
});