Estoy tratando de descubrir cómo reflejar correctamente dos campos de entrada y cambiarlos dinámicamente en función del valor de una casilla de verificación. Esto es lo mejor que puedo pensar en usar la propiedad calculada con funciones de obtención y configuración. El problema es cuando el usuario escribe (1) "ABC" en los detalles de envío, (2) desmarca (copy_chekcbox=false), (3) escribe "123" en los detalles de facturación y (4) vuelve a marcar (copy_chekcbox=true) ( 5) los detalles de facturación no vuelven a los detalles de envío, que es lo que necesito. Imagen con pasos
Además, ¿hay alguna forma más corta y óptima de reflejar dos campos y cambiar sus valores según el valor de la casilla de verificación?
Gracias de antemano.
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <p>Shipping details</p> <input v-model="shipping" type="text" /> <p>Same as shipping: <input type="checkbox" v-model="copy_chekcbox" /></p> <p>Billing details</p> <input v-model="billing" type="text" :disabled="copy_chekcbox" /> </div> <script> var app = new Vue({ el: '#app', data: { shipping_data: '', billing_data: '', copy_chekcbox: true, }, computed: { shipping: { get: function() { return this.shipping_data }, set: function(newValue) { if (!this.copy_chekcbox) { this.shipping_data = newValue } else { this.billing_data = newValue this.shipping_data = newValue } }, }, billing: { get: function() { return this.billing_data }, set: function(newValue) { if (!this.copy_chekcbox) { this.billing_data = newValue } else { this.billing_data = this.shipping_data } }, }, } }) </script> </body> </html>En mi opinión, creo que la forma más fácil es usar dos entradas con v-if:
<p>Shipping details</p> <input v-model="shipping" type="text"> <p>Same as shipping: <input type="checkbox" v-model="copy_chekcbox"></p> <p>Billing details</p> <template v-if="copy_chekcbox"> <input v-model="shipping" type="text"> <template> <template v-else> <input v-model="billing" type="text"> </template>La principal ventaja de este método es que su código JavaScript sigue siendo simple.
prueba esto:
billing: { get: function() { return this.copy_checkbox ? this.shipping_data : this.billing_data },debería volver a ejecutar la función calculada para sus datos de facturación cuando cambie copy_checkbox y, por lo tanto, actualice sus datos de facturación.