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

Question

I use v-for to generate task tabs.

Tasks can be created by users, and after users have created a new task I want the UI changing to the newly created tab automatically.

i.e. After a new tab has been added to the dom tree, itself click event will be triggered and the callback function activateTask will execute.

<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

You can bind v-tabs with v-model to control 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>