show active border on clicked or selected item using css and vue

user_7411584 0
Viewed 1275

I have multiple list items. I want active blue border on clicked or selected item. I am creating a image card layouts. It will active while selecting. It will be a single item selection.

Here is the below code

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>

style css 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;
}

How to do the active border on selected item or clicked item using css and vue?

vue.js css javascript
1 Answers

If I understand you correctly, you will only have a single card that is displaying a blue border when clicked. You can track which card is clicked by assigning it to a data property. For instance, the function @getLayoutDetails might include a method to set this.selectedObject = obj, the object you've passed in.

Then, you can use that data value to set a CSS class on the selected object. That would look something like:

<div
    v-for="(obj, index) in layoutDatas"
    :key="index"
    class="item"
    :class="obj.id === selected.id ? 'active' : 'not-active'"
    @click="getLayoutDetails(obj)"
  >

And use the active tag in your css:

.active {
  border: 1px solid #0071c5;
}
user_141259750
Related