How to change a button when clicked in Vue JS and Tailwind CSS

Question

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>

Do you get an error message when you run this? If so, post it in your question. Also, a better way to do this would be to make a computed property called something like imgSrc, which returns one url if isDark is true and another if false, and then in your template, just have one <img> tag, like this: <img :src="imgSrc" class="....."> — Christopher Shroba
– Christopher Shroba, Commented Jan 11, 2022 at 19:26

Boussadjra Brahim · Accepted Answer · 2022-01-11 19:44:31Z

2

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" >

answered Jan 11, 2022 at 19:44

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change a button when clicked in Vue JS and Tailwind CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related