Tengo problemas con el enlace bidireccional de un componente personalizado en Siguiente. Tal vez estoy cometiendo un error tonto en alguna parte. Apreciaría cualquier ayuda
#Entrada de componentes personalizados.vue
<template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" class="input" type="text"> </template> <script> export default { props:{ modelValue:String, }, } </script> <style lang="scss" scoped> @import '@/assets/_shared.scss'; .input{ padding: 10px 15px; background: white; border: 1px solid #cecece; border-radius: 4px; } </style>#Índice de página.vue
<template> <section class="new-appeal"> <form class="new-appeal-form"> <label class="new-appeal-form-item"> <Input placeholder="Appeal" v-model.trim="cashier_name"/> </label> <Button class="submit">Creare appeal</Button> </form> </section> </template> <script> export default { layout:'main', data:function(){ return{ cashier_name:'' } }, } </script>como puede ver, estoy tratando de hacer un enlace de datos bidireccional, pero desafortunadamente no funciona
En Vue 2, el valor predeterminado del modelo v es solo el value y, para actualizar el valor, debe emitir un evento de input . No puede usar update:modelValue en vue 2. Debería usarlo de esta manera,
<Input placeholder="Appeal" v-model.trim="cashier_name"/>en su componente de entrada personalizado
<template> <input :value="value" @input="$emit('input', $event.target.value)" class="input" type="text"> </template> <script> export default { props: ['value'] } </script>Esto está funcionando muy bien y está siguiendo las convenciones.
index.vue
<template> <section class="new-appeal"> <form class="new-appeal-form"> <label class="new-appeal-form-item"> <Input v-model.trim="cashierName" placeholder="Appeal" /> </label> <Button class="submit">Creare appeal</Button> </form> </section> </template> <script> export default { layout: 'main', data() { return { cashierName: '', } }, } </script> Input.vue
<template> <input :value="cashierName" class="input" type="text" @input="$emit('input', $event.target.value)" /> </template> <script> export default { name: 'Input', props: { cashierName: { type: String, default: '', }, }, } </script> De lo contrario, también podría tenerlo de la siguiente manera (todavía estoy cambiando el nombre de cashier_name a camelCase por cierto)
index.vue
<template> <section class="new-appeal"> <form class="new-appeal-form"> <label class="new-appeal-form-item"> <Input v-model.trim="cashierName" placeholder="Appeal" /> </label> <Button class="submit">Creare appeal</Button> </form> </section> </template> <script> export default { layout: 'main', data() { return { cashierName: '', } }, } </script> Input.vue
<template> <input :value="cashierName" class="input" type="text" @input="$emit('update:cashierName', $event.target.value)" /> </template> <script> export default { name: 'Input', // https://vuejs.org/v2/api/#model model: { prop: 'cashierName', event: 'update:cashierName', }, props: { cashierName: { type: String, default: '', }, }, } </script>