Vue常用之DOM元素未更新时的回调“nextTick”

<template>
  <li>
    <label>
      <!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
      <!-- <input type="checkbox" v-model="todo.done"/> -->
    
      <input type="text" ref="inputTitle" v-show="todo.edit" :value="todo.title"  @blur="blurPrice(todo,$event)" @keyup.enter="keyupEnter(todo,$event)">
     
    </label>

    <button  class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
  </li>
</template>

<script>


export default {
  name: "MyItem",
  // props:['todo','checkTodo'],
  props: {
    todo: {
      type: Object,
      required: true, //必要性
    },
    // checkTodo: {},
    // delTodo: {},
  },
  data() {
    return {
      todoItem: this.todo,
      // showHide:false,
    };
  },
  mounted() {
    // console.log(this.valueAll,'ss')
  },
  computed:{
    
  },
  
  methods: {

    handleEdit(todo){//编辑
      // this.todo.edit = true 不能这样添加要

      // if(todo.edit){//这个判断存在-重复调用问题
      if(todo.hasOwnProperty('edit')){//完美解决-重复调用问题
         todo.edit = true
      }else{
        console.log('身上没用edit')
         this.$set(todo,'edit',true)//set添加
        
      }
      // setTimeout(()=>{//因为inputDOM标签在执行这个代码的时候，还没有显示出来，所以加定时器
      // this.$refs.inputTitle.focus()//获取焦点
      // },100)

      this.$nextTick(()=>{//用的特别多，在下一次DOM更新结束后执行指定的回调
        this.$refs.inputTitle.focus()//获取焦点
      })
    },
   
    
    
  },
};
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li:hover {
  background: rgb(219, 216, 216);
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:hover button {
  display: block;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
</style>