Tengo varios elementos de la lista. Quiero un borde azul activo en el elemento seleccionado o seleccionado. Estoy creando diseños de tarjeta de imagen. Se activará durante la selección. Será una selección de un solo artículo.
Aquí está el siguiente código
código de plantilla
<div class="container"> <div v-for="(obj, index) in layoutDatas" :key="index" class="item" @click="getLayoutDetails(obj)" > <cmp-image-viewer ref="index" :style="'width: 250px; height:150px;'" /> <div class="column"> <div class="text1"> {{ obj.layoutId }} </div> <div class="row"> <div class="col-xs-9 text2 noBorder"> {{ obj.layoutTitle }} </div> </div> </div> </div> </div>código de estilo css
.container { display: flex; flex-direction: row; flex-wrap: wrap; margin: auto; height: 450px; border-radius: 3px; margin-top: 50px; padding: 10px; } .item { width: 250px; height: 220px; border: 0.3px solid #eaeaea; align-self: center; padding: 5px; border-radius: 3px; margin: 10px 10px; transition: all .15s ease-in-out; } .item:hover { border: 0.3px solid #0071c5; transform: scale(1.1); } .itemClick { border: 1px solid #0071c5; } .text1 { font-weight: bold; padding-left: 10px; font-size: 16px; } .text2 { color: #959595; }¿Cómo hacer el borde activo en el elemento seleccionado o en el elemento en el que se hizo clic usando css y vue?
Si lo entiendo correctamente, solo tendrá una sola tarjeta que muestra un borde azul cuando se hace clic. Puede rastrear en qué tarjeta se hace clic asignándola a una propiedad de datos. Por ejemplo, la función @getLayoutDetails podría incluir un método para configurar this.selectedObject = obj , el objeto que ha pasado.
Luego, puede usar ese valor de datos para establecer una clase CSS en el objeto seleccionado. Eso se vería algo como:
<div v-for="(obj, index) in layoutDatas" :key="index" class="item" :class="obj.id === selected.id ? 'active' : 'not-active'" @click="getLayoutDetails(obj)" > Y usa la etiqueta active en tu css:
.active { border: 1px solid #0071c5; }