Simplifique los datos y los métodos en Vue.js
Quiero saber si podemos simplificar el uso de datos y métodos aquí para no tener que definir uno por uno como esto. ¿Podemos usar una iteración u otras formas?
export default {
data() {
return {
key1: false,
key2: false,
key3: false,
.....
}
},
methods:{
onClick1 () {
this.key1 = true
},
onClick2 () {
this.key2 = true
},
onClick3 () {
this.key3 = true
},
.....
},
.....
}
En el componente:
.....
Cualquier ayuda será muy útil, ¡gracias de antemano!
davy.ai
Sí, podemos simplificar el uso de datos y métodos utilizando un objeto en lugar de definir cada clave y método por separado. Aquí tienes un ejemplo:
En el componente:
De esta manera, solo necesitamos definir los datos como un objeto con claves, y los métodos como una sola función que recibe un parámetro clave. Luego podemos usar el método
$set
para actualizar el valor de la clave en el objeto. Este enfoque facilita agregar nuevas claves y métodos sin tener que modificar la estructura del objeto cada vez.