I am currently developing an app using vuetify, and I am encountering some challenges with the v-menu feature.
The issue arises when I click on a text input field, it triggers the opening of a v-menu. Within this menu, there is a custom component that I have created, which is essentially a simple keypad ranging from 0 to 9. The objective is to use this keypad to modify the text input field.
My goal is to incorporate a save button within the menu that will allow users to save any changes made and close the menu. However, I am facing difficulties in implementing this functionality.
How can I make this work seamlessly with multiple text input fields? While this may sound like a complex process for simply editing a text input, it is essential as the app will be utilized on a large touch screen where using the onscreen keyboard is not ideal for changing numbers.
What approach would you recommend?
<v-menu bottom :close-on-content-click="false">
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-bind="attrs"
v-on="on"
v-model="result"
readonly
></v-text-field>
</template>
<Calculator :data.sync="result" /> <-------- My keypad component
</v-menu>
Custom Keypad Component
<template>
<v-card class="widget" @contextmenu.prevent="" color="grey lighten-2" max-width="260" >
<v-card-text>
<v-card class="mb-2" elevation="1" min-height="64px" max-height="64px" tile flat color="lighten-grey" >
<v-card-text>
<v-text-field dense flat reverse v-model="value" :suffix="suffix" ></v-text-field>
</v-card-text>
</v-card>
<v-row no-gutters class="pb-1">
<v-col align="center" justify="center">
<v-btn color="grey lighten-5" @click="click1" tile elevation="1" height="55px" >1</v-btn>
</v-col>
<v-col align="center" justify="center">
<v-btn color="grey lighten-5" @click="click2" tile elevation="1" height="55px" >2</v-btn>
</v-col>
<v-col align="center" justify="center">
<v-btn color="grey lighten-5" @click="click3" tile elevation="1" height="55px" >3</v-btn>
</v-col>
</v-row>
<v-row no-gutters class="pb-1">
<v-col align="center" justify="center">
<v-btn color="grey lighten-5" @click="click0" tile elevation="1" height="55px" >0</v-btn >
</v-col>
<v-col align="center" justify="center">
<v-btn color="grey lighten-5" @click="clickDecimal" tile elevation="1" height="55px" >.</v-btn >
</v-col>
<v-col align="center" justify="center">
<v-btn color="grey lighten-5" @click="clickClear" tile elevation="1" height="55px" >C</v-btn >
</v-col>
</v-row>
<v-row no-gutters class="pt-2">
<v-col align="right">
<v-btn @click="cancel" tile small>Cancel</v-btn>
<v-btn class="ml-2 mr-0" @click="onSave" tile small>Save</v-btn>
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<script>
export default {
props: ['data', 'suffix'],
data() {
return { value: '0', };
},
methods: {
click0() {
if (this.value.toString().length > 9) return;
if (this.value === '0') { this.value = ''; }
this.value = this.value + '0';
},
click1() {
if (this.value.toString().length > 9) return;
if (this.value === '0') { this.value = ''; }
this.value = this.value + '1';
},
click2() {
if (this.value.toString().length > 9) return;
if (this.value === '0') { this.value = ''; }
this.value = this.value + '2';
},
click3() {
if (this.value.toString().length > 9) return;
if (this.value === '0') { this.value = ''; }
this.value = this.value + '3';
},
clickClear() {
this.value = '0';
},
clickDecimal() {
if (this.value.includes('.')) return;
this.value = this.value + '.';
},
onSave() {},
cancel() {},
},
};
</script>