vue.js - VueJS - How to toggle between dark and light themes in vuexy by clicking on icon

Question

I am trying to toggle between the dark and light themes using icon, i have tried using the radio buttons and it works absolutely fine i don't know where i am going wrong with icons.

Here is the code that works with vs-radio buttons:

<vs-radio v-model="changeTheme" vs-value="light" vs-name="theme-mode-light">Light</vs-radio>
<vs-radio v-model="changeTheme" vs-value="dark" vs-name="theme-mode-dark">Dark</vs-radio>
...
<script>
watch: {
  layoutType (val) {
    // Reset unsupported options
    if (val === 'horizontal') {
      if (this.changeTheme === 'semi-dark') this.changeTheme = 'light'
      if (this.navbarType === 'hidden')   this.navbarTypeLocal = 'floating'
      this.$emit('updateNavbarColor', '#fff')
    }
  }
},
computed: {
  changeTheme: {
    get ()    { return this.$store.state.themecolr},
    set (val) { this.$store.dispatch('updateTheme', val) }
  },
}
</script>

Here is the code which i am trying to achieve currently:

 <div class="con-img ml-3">
          <feather-icon v-if="this.$store.state.themecolr=== 'light'" icon="Icon" v-model="changeTheme"   vs-name="theme-mode-light"/>
        </div>
        <div class="con-img ml-3">
          <feather-icon v-if="this.$store.state.themecolr=== 'dark'" icon="Icon" v-model="changeTheme" vs-value="dark" vs-name="theme-mode-light"/>
        </div>
...
methods: {
      changeTheme: {
        get ()    { return this.$store.state.themecolr},
        set (val) { this.$store.dispatch('updateTheme', val) }
      },
    }

I tried adding @change and @click to the feather icon but that did not work out, and i also tried adding the function like this :

changeTheme (){
    if(this.$store.state.themecolr=== 'light'){
      return this.$store.state.themecolr=== 'dark'
    }else if(this.$store.state.themecolr=== 'dark'){
      this.$store.state.themecolr=== 'light'
    }
  }

Please someone help me to achieve this, i want to toggle the theme using the feather icons, but i am able to do it with the radio buttons, but that s not what i want.

question from:https://stackoverflow.com/questions/65838326/vuejs-how-to-toggle-between-dark-and-light-themes-in-vuexy-by-clicking-on-icon

Answer 1

I looked at the implementation of the vue-feather-icons here and it is missing the event handlers. If that is the case, it means those components don't emit any events.

I would suggest you move your event handler to the surrounding div for the icons. see what I did here for an example: https://codesandbox.io/s/distracted-noether-gud0p?file=/src/App.vue