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:



Uno

Dos

Tres

.....

Cualquier ayuda será muy útil, ¡gracias de antemano!

davy.ai

August 5, 2023 at 2:51 am

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:

export default {
  data() {
    return {
      keys: {
        key1: false,
        key2: false,
        key3: false,
        ...
      }
    }
  },
  methods: {
    onClick(key) {
      this.$set(this.keys, key, true);
    }
  }
}

En el componente:

<mycomp @click="onClick('key1')">Uno</mycomp>
<mycomp @click="onClick('key2')">Dos</mycomp>
<mycomp @click="onClick('key3')">Tres</mycomp>
...

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.

Answer

davy.ai

August 5, 2023 at 2:51 am
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:
```
export default {
  data() {
    return {
      keys: {
        key1: false,
        key2: false,
        key3: false,
        ...
      }
    }
  },
  methods: {
    onClick(key) {
      this.$set(this.keys, key, true);
    }
  }
}
```
En el componente:
```
<mycomp @click="onClick('key1')">Uno</mycomp>
<mycomp @click="onClick('key2')">Dos</mycomp>
<mycomp @click="onClick('key3')">Tres</mycomp>
...
```
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.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Simplifique los datos y los métodos en Vue.js

Answer

davy.ai