Как заменить последний next в v-stepper?

Question

[imeyuves]

Не могу разобраться как реализовать функцию замены последнего next на кнопку submit
Использую vuetify, вот от туда этот v-stepper

<form @submit.prevent="submit"
    <v-stepper :items="['Название и авторы', 'Описания', 'Изображение']">
    <!--...-->
        <template v-slot:item.3> <!-- Последний item-->
        <!--...-->
        </template>
    </v-stepper>

<script setup>
     // ...
     function submit(value) {
     // ....
     }
    <script>

Answer 1

[Виктор Майоров]

Смотрите документацию

Playground Vuetify

<template>
  <v-app>
    <v-container>
      <v-stepper v-model="step" :items="items">
        <!--...-->
        <template v-slot:item.3>
          <!-- Последний item-->
          <!--...-->
        </template>

        <template v-slot:next>
          <v-btn @click="nextOrSubmit" :disabled="false">
            {{ isLastItem ? 'Submit' : 'Next' }}
          </v-btn>
        </template>
      </v-stepper>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref, reactive, computed } from 'vue'

  const items = reactive(['Название и авторы', 'Описания', 'Изображение'])
  const step = ref(1)

  const isLastItem = computed(() => step.value === items.length)

  const nextOrSubmit = () => {
    if (isLastItem.value) {
      // submit
      alert('submit')
      return
    }
    step.value++
  }
</script>