vuetify
vuetify copied to clipboard
feat(VNumberInput): emit events when using controls
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>