v-for 创建新 dom 后 Vue 触发点击事件答案

【问题标题】：Vue trigger click event after v-for has create a new domv-for 创建新 dom 后 Vue 触发点击事件
【发布时间】：2020-12-25 05:54:58
【问题描述】：

我使用 v-for 来生成任务选项卡。

用户可以创建任务，在用户创建新任务后，我希望 UI 自动更改为新创建的选项卡。

即新的tab添加到dom树后，会触发自身的click事件，并执行回调函数activateTask。

<template>
  <v-container>
    <v-btn @click="createNewTask"></v-btn>
    <v-tabs>
      <v-tab v-for="task in tasks" :key="task.uuid" @click="activateTask">
        {{ task.name }}
      </v-tab>
    </v-tabs>
  </v-container>
</template>

<script>
export default {
  data: {
    tasks: [],
  },
  method: {
    createNewTask() {
      this.tasks.push({
        uuid: util.generateUUID(),
        name: "name",
      });
    },
  },
};
</script>

【问题讨论】：

我会将新任务的名称放到属性activeTabName中，并让标签容器根据这个属性预先选择一个标签。类似<v-tabs v-model="activeTabName"
谢谢。 v-model 可以工作！现在就试试吧。

标签： vue.js vuetify.js vuetify-tabs

【解决方案1】：

你可以用v-model绑定v-tabs来控制active-tab。

<template>
  <v-container>
    <v-btn @click="createNewTask"></v-btn>
    <v-tabs v-model="currentTab">
      <v-tab v-for="task in tasks" :key="task.uuid" @click="activateTask">
        {{ task.name }}
      </v-tab>
    </v-tabs>
  </v-container>
</template>

<script>
export default {
  data: {
    tasks: [],
    currentTab: null
  },
  method: {
    createNewTask() {
      this.tasks.push({
        uuid: util.generateUUID(),
        name: "name",
      });
      this.currentTab = this.tasks.length-1
    },
  },
};
</script>

【讨论】：

有效！它将更改为新标签！但是如何触发点击事件。点击处理程序将触发其他事件来更新兄弟组件。
在我的项目中，我可以在 createNewTask() 的末尾调用 activateTask。谢谢。

【解决方案2】：

找出一种方法，使用update 钩子和一个变量来检查是否创建了一个新的tab dom。如果true从dom树中选择最后一个子节点并调度click事件。

好丑?。

  updated() {
    this.$nextTick(() => {
      if (!this.newTaskCreated) {
        return
      }
      this.$el.querySelectorAll('.task-tab:last-child')[0].dispatchEvent(new Event('click'))
      this.newTaskCreated = false
    })
  }

【讨论】：