I have a list of items that I want to display as image cards with an active blue border when clicked. Only one item can be selected at a time.
Below is the code snippet:
Template Code
<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>
CSS Style Code
.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;
}
To implement the active border on the selected or clicked item using CSS and Vue, how should I proceed?