If I have an element like this that is in a for loop:
JavaScript
x
2
1
<p class="description" id="description" @click="onClickDescription">{{ review.text }}</p>
2
meaning that there is more than one of these elements, how can I change the style of the element that was clicked.
I have this function:
JavaScript
1
6
1
onClickDescription(e) {
2
console.log(e)
3
let d = document.getElementById('description');
4
d.style.webkitLineClamp = 99;
5
}
6
But this will change the style of all my <p>
elements instead of just the one I clicked. How can I get around this?
Advertisement
Answer
You can use index or id if you have it in review object:
JavaScript
1
14
14
1
new Vue({
2
el: '#demo',
3
data() {
4
return {
5
reviews: [{text: 'aaa'}, {text: 'bb'}, {text: 'ccc'}],
6
selected: null
7
}
8
},
9
methods: {
10
onClickDescription(i) {
11
this.selected = i
12
}
13
}
14
})
JavaScript
1
6
1
.description {
2
color: green;
3
}
4
.active {
5
color: red;
6
}
JavaScript
1
6
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
2
<div id="demo">
3
<div v-for="(review, i) in reviews" :key="i">
4
<p class="description" :class="i === selected && 'active'" @click="onClickDescription(i)">{{ review.text }}</p>
5
</div>
6
</div>