Vue中的$nextTick的用法

最新推荐文章于 2024-09-14 09:25:39 发布

Ronin6199

最新推荐文章于 2024-09-14 09:25:39 发布

阅读量309

点赞数

分类专栏： vue 文章标签： javascript 前端 vue vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/m0_47106199/article/details/128713614

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了Vue.js中的$nextTick方法，用于在DOM更新之后执行回调函数。在修改数据并需要基于新DOM执行操作时，应当使用$nextTick。文中通过一个编辑待办事项的例子展示了$nextTick如何确保在编辑模式切换和输入框聚焦等操作中正确更新视图。

摘要由CSDN通过智能技术生成

$nextTick

1，语法：this.$nextTick(回调函数)

2，作用：在下一次DOM更新结束后执行其指定的回调

3，什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

<template>
  <div>
    <li>
      <label>
        <input type="checkbox" :checked="items.state" />
        <span v-show="!items.isEidt">{{ items.todoName }}</span>
        <input ref="fcInput" v-show="items.isEidt" type="text" :value="items.todoName"
          @blur="removeMouse(items, $event)">
      </label>
      <button class="btn btn-danger">删除</button>
      <button class="btn btn-eidt " v-show="!items.isEidt" @click="eidtTodo(items)">编辑</button>
    </li>
  </div>

</template>

<script>
export default {
  name: 'MyItem',
  props: ['items', 'checkTodo', 'delTodos'],
  data() {
    return {
      todo: this.todos
    }
  },
  methods: {
    eidtTodo(todo) {
      //hasOwnProperty是用来检测属性是否为对象的自有属性，如果是，返回true，否者false; 参数指要检测的属性名；
      if (todo.hasOwnProperty('isEidt')) {
        console.log('有isEidt')
        todo.isEidt = true
        //使用nextTick在数据更新渲染完毕执行操作Dom的 否则操作dom没有作用
        this.$nextTick(() => {
          this.$refs.fcInput.focus()
        })
      } else {
        //使用vue的set绑定响应式数据
        this.$set(todo, 'isEidt', true)
        console.log(todo)
      }
    },
    removeMouse(todo, e) {
      todo.isEidt = false
        //使用全局事件总线在组件之间进行数据传输
      this.$bus.$emit('updateTodo', todo.id, e.target.value)
    }
  },