Quiero saber si podemos simplificar el uso de datos y métodos aquí para que no necesitemos definirlos uno por uno de esta manera. ¿Podemos usar una iteración u otras formas?
export default { data() { return { key1 = false, key2 = false, key3 = false, ..... } }, methods:{ onClick1 () { key1 = true }, onClick2 () { key2 = true }, onClick3 () { key2 = true }, ..... }, ..... }en el componente
<myComp @click="onClick1">One</myComp> <myComp @click="onClick2">Two</myComp> <myComp @click="onClick3">Three</myComp> .....Cualquier ayuda sería de gran ayuda, gracias de antemano!
Defina un objeto de keys en data y una función genérica onClick en methods para establecer el valor de una determinada clave en verdadero:
export default { data() { return { keys: { 1: false, 2: false, 3: false } } }, methods:{ onClick (key) { this.keys[key] = true } } }En el componente, pase la clave de la siguiente manera:
<myComp @click="() => onClick(1)">One</myComp> <myComp @click="() => onClick(2)">Two</myComp> <myComp @click="() => onClick(3)">Three</myComp>Primero, la propiedad de datos devuelve un objeto, por lo que no puede definir variables allí.
data() { return { key1: false, key2: false, key3: false, ... } }En algunos casos, puede cambiar los datos directamente en eventos de clic como:
<myComp @click="key1 = true">One</myComp> <myComp @click="key2 = true">Two</myComp> <myComp @click="key3 = true">Three</myComp>No es LA mejor práctica, pero es útil en algunos casos.
En la mayoría de los casos, debe usar devoluciones de llamada como el ejemplo realizado por "Majed Badawi" aquí.
Puede tomar una matriz y recorrerla como se muestra a continuación.
Nota : use this.$set para actualizar el valor de la matriz en dom también.
new Vue({ el: '#app', data() { return { keys: [false, false, false, false, false] } }, methods: { onClick(index) { this.$set(this.keys, index, true) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id='app'> <div v-for="(item,index) in keys" @click="() => onClick(index)">Index-{{index}}</div> <pre> {{keys}}</pre> </div>