Vue 在 v-for 新建一个后触发点击事件 dom

Question

我使用 v-for 生成任务标签。

任务可以由用户创建，在用户创建新任务后我希望UI自动切换到新创建的标签。

即dom树中添加新标签后，会触发自身的点击事件，并执行回调函数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 select 来自 dom 树的最后一个子节点并调度点击事件。

好丑。

  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-tabs 与 v-model 绑定以控制 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>

Vue 在 v-for 新建一个后触发点击事件 dom

Vue trigger click event after v-for has create a new dom

vue.js

vuetify.js

vuetify-tabs