Hola, les saluda Miguel y en esta ocasión les traigo un post.
Aunque no es demasiado difícil, he descubierto que este tema carece de documentación y ejemplos del mundo real en línea, aquí hay un pequeño tutorial.
La implementación de enlace de datos bidireccional * (a la manera de Vue) puede no ser obvia para los nuevos desarrolladores o aquellos que son nuevos en Vue / Vuetify. La siguiente es una implementación de Vue eventos personalizados patrón que he encontrado que funciona bien al componente de elementos de formulario.
Puede encontrar una demostración en funcionamiento (a través de codesandbox) aquí: https://codesandbox.io/s/throbbing-http-xo7t2?file=/src/App.vue
vue: 2.6.11 vuetify: 2.3.8
El código
Formulario (componente principal)
// <template>
<TextField
v-bind:username="username"
v-on:update:username="username = $event"
labeltext="username"
/>
// <script>
import { TextField from "@/components/formFields";
export default {
name: "Feedback",
components: {
TextField
},
data: () => (
username: ""
})
};
Elemento de formulario (componente secundario)
// <template>
<v-text-field
:label="labeltext"
v-model="val"
@input="$emit('update:username', $event)"
/>
// <script>
export default {
name: "TextField",
props: {
labeltext: String
},
data: () => ({
val: ""
})
};
Gracias por leer.
Añadir comentario