Tengo problemas para acceder al texto. Estoy ingresando en un campo de entrada personalizado usando la directiva v-model vue, aquí están los códigos para el componente de entrada personalizado y App.vue
Este es mi campo de entrada personalizado
Entrada.vue
<template> <label >{{label}}</label> <input v-model="bindTo" type='type' required> </template> <script> export default { props:['label','type','bindTo'] } </script>aplicación.vue
<template> <!-- Email --> <Input type="email" label="Email" :bindTo="email"/> <p>Email : {{email}}</p> </template> <script> import Input from "./Input.vue"; export default { components:{ Input, }, data() { return { email:"", password:"", role:"developer", terms:false, tempSkill:"", skills:[], passwordError:"", emailError:"", } }, </script>No puedo tener acceso al valor en el correo electrónico en mi método de datos. ¿Qué podría estar mal?
En Vue.js, simplemente agregue v-bind="$attrs" y v-on="$listeners" , para que pueda reenviar todo, desde el componente principal al secundario.
Entrada.vue
<template> <label >{{label}}</label> <input v-bind="$attrs" v-on="$listeners"> </template> <script> export default { props: ['label'] } </script>aplicación.vue
<template> <!-- Email --> <Input type="email" label="Email" v-model="email" required/> <p>Email : {{email}}</p> </template> <script> import Input from "./Input.vue"; export default { components: { Input, }, data() { return { email: "", password: "", role: "developer", terms: false, tempSkill: "", skills: [], passwordError: "", emailError: "", } }, </script>Revisando los documentos a fondo, encontré la solución que ayudó a resolver mi problema.
Entrada.vue
<template> <label >{{label}}</label> <input :value="modelValue" type='type' @input="$emit('update:modelValue',$event.target.value)" required> </template> <script> export default { props:['label','type','modelValue'], emits:['update:modelValue'] } </script>Luego en App.vue
<template> <!-- Email --> <Input type="email" label="Email" v-model="email"/> <p>Email : {{email}}</p> </template> <script> import Input from "./Input.vue"; export default { components:{ Input, }, data() { return { email:"", password:"", role:"developer", terms:false, tempSkill:"", skills:[], passwordError:"", emailError:"", } }, </script>Para obtener más detalles, visite los documentos, ya que hay otras formas de hacer que funcione aparte de este enfoque https://vuejs.org/guide/components/events.html