Meta

Para hacer un componente Vue 3 similar a una entrada que responda al teclado físico y al teclado en pantalla simultáneamente.

Enfoque actual

Use un accesorio para recibir entradas desde el teclado en pantalla y un modelo v en el elemento <input> para recibir entradas desde un teclado físico. He simplificado la idea de un teclado en pantalla a solo un botón que escribe "ABC" en el elemento de input . Miré esta publicación de Stackoverflow pero está en Vanilla JS y lo que quiero es un componente input aislado para poder elegir con qué combinarlo.

 // App.vue <template> <button @click="typeABC">Type ABC</button> <Input :userInputFromProp="content"> </template> <script> import { ref } from 'vue' import Input from "./Input.vue" const content = ref<string>("") function typeABC(event) { content.value += "ABC" } </script>

 // Input.vue <template> <input v-model="userInputFromProp" type="text" > </template> <script> import { ref } from 'vue' const props = defineProps( { userInputFromProp: { type: String as PropType<string>, required: false, default: () => "", }, } ) const { userInputFromProp } = toRefs(props) </script>

Problema

Parece que se están almacenando 2 copias separadas de userInputFromProp Si hago clic en "Escribir ABC", la entrada agrega "ABC" al contenido de entrada, pero si escribo "D" en el cuadro de texto después de eso y luego hago clic en "Escribir ABC" nuevamente , la "D" desaparece y obtengo "ABCABC". Además, recibo advertencias que dicen que no debería mutar el accesorio directamente. Soy consciente de esto, pero esto es lo más cerca que he estado de mi objetivo.

Agradecería cualquier sugerencia. Gracias por leer.