Vue

by talkhabi

HTML

<div id="app">
    <div class="todo">
    <div class="todo-left">
      <input type="checkbox" class="completed"/>
    </div>
    <div class="todo-middle">
      <label v-if="!editMode" @dblclick="activateEditMode">{{text}}</label>
      <input type="text" v-model="text" v-show="editMode" ref="input">
    </div>
    <div class="todo-right" v-if="!editMode">
      <span>❌</span>
    </div>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    editMode: false,
    text:'Go to shopping'
  },
  methods:{
    activateEditMode:function(){
      this.editMode=true;
      this.$nextTick(()=>{
        this.$refs.input.focus()
      })

    },
    onClickOutside:function(e){
      const { input} =this.$refs
      if(input && !input.contains(e.target)){
        this.editMode=false
      }

    }
  },
  mounted() {
    document.addEventListener("click", this.onClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.onClickOutside);
  }
})