vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

feat(VNumberInput): emit events when using controls

Open J-Sek opened this issue 6 months ago • 0 comments

Description

resolves #20342

Markup

<template>
  <v-app>
    <v-container>
      <v-number-input
        v-model="someValue"
        :loading="saving"
        clearable
        @blur="save"
        @click:clear="save"
        @click:control="save"
      />
      <pre class="mt-3">lastSavedValue: {{ lastSavedValue }}</pre>
    </v-container>
  </v-app>
</template>

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

  const someValue = ref(0)
  const lastSavedValue = ref(0)
  const saving = ref(false)

  // simplified example - it would be debounced and guarded against race conditions in real life
  async function save() {
    const v = someValue.value
    if (v !== lastSavedValue.value) {
      saving.value = true
      await new Promise(r => setTimeout(r, 1000))
      lastSavedValue.value = v
      saving.value = false
    }
  }
</script>

J-Sek avatar Aug 20 '24 15:08 J-Sek