Vue 2.0 Double click edit

by neylanjewar

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">

  <ul class="todo-list">
    <li v-for = "todo in todos">
      <div v-show = "todo.edit == false">
        <label @dblclick = "todo.edit = true"> {{todo.title}} </label>
      </div>
      <input v-show = "todo.edit == true" v-model = "todo.title"
      v-on:blur= "todo.edit=false; $emit('update')"
      @keyup.enter = "todo.edit=false; $emit('update')">
    </li>
  </ul>


</div>

CSS

.todo {
  background-color: green
}

.editing {
  background-color: red
}

JavaScript

new Vue({
  el: '#app',
  data: {
    todos: [{'title':'one value','edit':false},
    			  {'title':'one value','edit':false},
    				{'title':'otro titulo','edit':false}],
    editedTodo: null,
    message: 'Hello Vue.js!'
  },
  methods: {
    editTodo: function(todo) {
      this.editedTodo = todo;
    },
  }

})