vue.js - v-for 创建新 dom 后 Vue 触发点击事件

Question

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

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

即在dom树中添加了一个新的tab后，会触发自身的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>

Answer 1

找出一种方法，使用update钩子和变量来检查是否创建了新的选项卡 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
    })
  }

Answer 2

您可以绑定 v-tabsv-model以控制活动选项卡。

<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>