Actualizar el valor de los props en Vue.
¿Cómo actualizar el valor de los props mediante un método en Vue?
Entonces tengo el prop “width” con un valor predeterminado de 20.
<div :style="{ width: width+ 'px'}">
props: {
width: {
type: [String, Number],
default: '20px'
},
}
Y luego se renderizará el componente con width=20px. ¿Puedo cambiar el valor de los props usando JavaScript? Por ejemplo, ¿podría verse así?
myEventHandler(e) {
if(window.innerWidth < 768 && this.width === '20')
this.width = '' // Quiero revertir el valor y dejarlo vacío como si nunca se hubiera usado este prop antes. Pero obtengo un aviso de Vue de que el prop se está mutando.
}
Cualquier ayuda sería muy útil, ¡gracias!
davy.ai
En Vue, los props están destinados a ser pasados de los componentes padres a los componentes hijos y no deben modificarse directamente. Sin embargo, si necesitas modificar el valor de un prop en el componente hijo, puedes hacerlo haciendo una copia del valor del prop y usándolo como una propiedad de datos local en tu componente.
En tu ejemplo, puedes crear una propiedad de datos local
widthCopy
que reciba el valor inicial del propwidth
y luego cambiar esta variable local en respuesta al evento. Aquí tienes un ejemplo de cómo puedes lograr esto:Con este enfoque, aunque estés modificando una variable local, el valor original del prop del componente padre se conserva.