Vuetify. v-tabs. How to autosave when switching tabs?

Question

Vue.js

In the card-form component, a form for editing data. I don't want to create a "Save" button there. How to call save function in component when switching tabs? And also when you go to another page?

<template>
  <v-card>
    <v-tabs v-model="tab">
      <v-tab v-for="item in cards" :key="item.title">
        {{ item.title }}
      </v-tab>
    </v-tabs>

    <v-tabs-items v-model="tab">
      <v-tab-item v-for="item in cards" :key="item.title">
        <v-card flat>
          <v-card-text> <card-form :id="item.id" /></v-card-text>
        </v-card>
      </v-tab-item>
    </v-tabs-items>
  </v-card>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState("directory", ["cards"]),
  },
  data() {
    return {
      tab: null,
    };
  },
  created() {
    this.fetchCards();
  },
  methods: {
    ...mapActions("directory", ["fetchCards"]),
  },
};
</script>

Answer 1

In watch, keep track of the value of the active tab and process its change accordingly. When switching to another page, you can monitor $route.path and, again, process it (but you need to check here, there are doubts), the second option is to use hooks, for example, beforeRouteLeave.