JSFiddle - React, Tailwind, and code Playground

by yshrkn

HTML

<div id="app">
  <template id="lk-badge">
    <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>

JavaScript

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

new Vue({
  el: '#app',
});