0
167
ViewsCómo vincular el estilo al hacer clic en un bucle
Tengo una matriz de objetos (elementos) que se pueden incrementar con otros elementos, los muestro haciendo un bucle en la matriz.
ver:
y me gustaría resaltar un elemento cuando hago clic en él (p. ej.: otro color superior del borde), pero no puedo apuntar a un elemento específico y aplicar un estilo sin aplicar el estilo a toda la matriz. ¿Alguna idea?
Plantilla , estoy usando vuedraggable, no importa :
<template #item="{ element }"> <div class="item" :key="element" @click=" messageItemTitle(element.title); messageItemID(element.id); " > <div class="item-title"> {{ element.title }} </div> <div class="item-subType"> {{ element.type }} </div> </div> </template>El guión: Bueno, nada de lo que he codificado funcionó anteriormente, así que aquí están solo los datos:
data() { return { dragItems: dragItemsList, //15 items that I can clone into dropItems dropItems: [], //Array where I can add the items from dragItems }; },
·
Juan Pablo Isaza
1 answers
Answer question0
Puede aplicar condicionalmente la clase:
const app = Vue.createApp({ data() { return { items: [{id:1, title: 'aaa', type: 'type1'}, {id:2, title: 'bbb', type: 'type2'}, {id:3, title: 'ccc', type: 'type3'}], selected: null }; }, methods: { message(el) { this.selected = el.id } } }) app.mount('#demo') .item { border: 3px solid transparent; border-top-color: black; } .selected { border-top-color: green; } <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <div v-for="(element, i) in items" :key="i"> <!--<template #item="{ element }">--> <div class="item" :class="selected === element.id && 'selected'" :key="element" @click="message(element)" > <div class="item-title"> {{ element.title }} </div> <div class="item-subType"> {{ element.type }} </div> </div> <!--</template>--> </div> </div>
·
Juan Pablo Isaza
Report
Answer question