Confirm edit

The v-confirm-edit component is used to allow the user to verify their changes before they are committed.

Copy Page as Markdown

Usage

Update Field

Modify my value

<v-confirm-edit v-model="model">
  <template v-slot:default="{ model: proxyModel, actions }">
    <v-card
      class="mx-auto"
      max-width="320"
      title="Update Field"
    >
      <template v-slot:text>
        <v-text-field
          v-model="proxyModel.value"
          messages="Modify my value"
        ></v-text-field>
      </template>

      <template v-slot:actions>
        <v-spacer></v-spacer>

        <component :is="actions"></component>
      </template>
    </v-card>
  </template>
</v-confirm-edit>

<script setup>
  import { shallowRef } from 'vue'

  const model = shallowRef('Egg plant')
</script>

ads via vuetify

API

Component	Description
v-confirm-edit	Primary Component

Toggle Inline API

Guide

The v-confirm-edit component is an intuitive way to capture a model’s changes before they are committed. This is useful when you want to prevent accidental changes or to allow the user to cancel their changes.

Pickers

It’s easy to integrate pickers into the v-confirm-edit component. This allows you to provide a more user-friendly experience when selecting dates, times, or colors.

Disable actions

You can control the disabled state of action buttons using disabled prop by either passing an array to disable targeted actions or a boolean value to disable all actions. If the disabled prop is not provided, the component will use internal logic to determine the disabled state.