How to change a button when clicked in Vue JS and Tailwind CSS
I'm trying to do a Dark mode button toggle, the fist step that I want to make is a icon that changes when I click in the button, but my code isn't running.
That's my code:
<button href="" class="px-2 mb-1" @click="isDark = !isDark">
<img src="../Assets/Icons/moon.svg" alt="" class="w-6 h-5 hidden lg:flex md:flex" v-if="isDark = true">
<img src="../Assets/Icons/sun.svg" alt="" class="w-6 h-5 hidden lg:flex md:flex" v-if="isDark = false">
</button>
<script>
export default {
setup(){
const showSidebar = ref(false)
const stayInDropdown = ref(true)
const isDark = ref(true)
return{
showSidebar,
stayInDropdown,
isDark,
}
},
</script>
v-if="isDark = true"
means assigning true
to isDark
not comparing them, the comparison should be like v-if="isDark === true"
but you could just do v-if='isDark'
:
<img v-if='isDark' src="../Assets/Icons/moon.svg" alt="" class="w-6 h-5 hidden lg:flex md:flex" >
<img v-else src="../Assets/Icons/sun.svg" alt="" class="w-6 h-5 hidden lg:flex md:flex" >