Level 8
@p0k3rface That shouldn't be too difficult, can you share your current code and what you've tried so far?
Nov 21, 2022
3
Level 1
How to change style of element in v-for. Vue
Hello, so I have SVG element and when I click, I want to change color for only clicked SVG and not all of them. How can I get this result with Composition API?
Level 1
@christian-qode So code is big i'll show u structure of it :
<template>
<div v-for="something in somethings">
some code here...
I've got SVG icon imported in this component:
<SvgIcon :class="isClicked? 'fill-red' : 'fill-white"/>
</div>
</template>
Level 20
<div id='app'>
<div v-for="something in somethings" :key='something.id'>
<div class='flex gap-4 justify-center' >
<button @click='something.isClicked= !something.isClicked' type="button"
class='bg-sky-200 px-4 py-1 rounded-md '>
<span> {{something.name}}</span>
<svg
:class="something.isClicked? 'text-gray-500' : 'text-red-500'" class="h-6 w-6 " fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
isClicked: true,
somethings: [{
id: 1,
name: 'one',
isClicked: false
}, {
id: 2,
name: 'two',
isClicked: false
}
]
}
}
}).mount('#app')
</script>
Please or to participate in this conversation.