Vue Simple Component

by Christopher O

HTML

<div id="app">

  <template id="item-edit">
    <li>
      <span v-show="!inEdit">{{item.name}}</span>
      <input v-show="inEdit" type="text" v-model="item.name" />
      <a href="#" @click.prevent="toggle();">{{inEdit ? 'save' : 'edit'}}</a>
    </li>
  </template>
  
  <ul>
    <item-edit v-for="item in items" :item="item"></item-edit>
  </ul>
  
  <pre>
    {{$data.items | json}}
  </pre>
</div>

CSS

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

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

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

pre {
  color:gray;
}

Babel + JSX

Vue.component('item-edit', {
  template: '#item-edit',
  props: {
    item: Object,
  },
  data() {
    return {
      inEdit: false,
    }
  },
  methods:{
   toggle(){
     this.inEdit = !this.inEdit;
   }
  }
});

new Vue({
  el: '#app',
  data: {
    items: [{
      id: 1,
      name: 'test-1'
    }, {
      id: 2,
      name: 'test-2'
    }, {
      id: 3,
      name: 'test-3'
    }, ],
  }
});