Skip to content

Instantly share code, notes, and snippets.

@hereiscasio

hereiscasio/MessageInput.vue

Created January 9, 2019 15:28
Show Gist options
  • Save hereiscasio/43987662a834abdb86f191ac91bb16c3 to your computer and use it in GitHub Desktop.
Save hereiscasio/43987662a834abdb86f191ac91bb16c3 to your computer and use it in GitHub Desktop.
Download ZIP
Vuetify / Text Field : clear the input by using `ref` only
Raw
MessageInput.vue
<template>
<v-footer class="pa-3" absolute>
<v-text-field
ref="textField"
@keyup.enter='sendText'
prepend-inner-icon="place"
placeholder="Type something here . . ."
solo hide-details clearable class="mb-3"
/>
</v-footer>
</template>
<script>
export default {
methods: {
sendText(e) {
if ( !e.target.value ) return; // reject empty msg
this.$refs.textField.$el.getElementsByTagName('input')[0].value = '';
}
}
}
</script>
@hereiscasio
Copy link
Author

hereiscasio commented Jan 10, 2019 •
edited
Loading

but that value will "come back" after blur the v-text-field,

so use v-model is the best way

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment