[Vuejs]-Vuetify Menu, edit text field with custom component keypad

by

0👍

✅

Thanks for sharing your keypad component code. Check this codesandbox I made: https://codesandbox.io/s/stack-70120821-5uyq4?file=/src/components/Keypad.vue

I simplified the use of your keypad component by removing the inner text field and cancel/save buttons, also optimized the way the numpad is generated, but you can modify it to your taste.

I setup up a watcher for the inside value number of the keypad. And whenever it gets updated, emits an event called "output" to his parent with the new value.

 watch: {
    ...
    // When inner value gets a new value, emits and event to parent
    value(val) {
      this.$emit('output', val)
    }
  },

On the parent side, you receive the new value by setting up the custom event @output. The $event var contains the data emited from the child component. In this example I just simply update the value of the v-text-field of the parent component. But you can also pass this value to a method if you need to validate something or do other things with it.

    <Keypad :input="result" @output="result = $event" />

In case you need to update the keypad value from the parent component you can do it usign the prop I defined called input. To be able to work properly on the initial load of the page, you need to use the eager prop on the v-menu. That way, the custom keypad component gets rendered since the beggining.

Leave a comment