VueJS - 如何通过单击图标在 vuexy 中的深色和浅色主题之间切换

Question

我正在尝试使用图标在深色和浅色主题之间切换，我已经尝试使用单选按钮并且它工作得非常好我不知道我的图标哪里出错了。

这是与单选按钮一起使用的代码：

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

这是我目前正在尝试实现的代码：

 <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) }
      },
    }

我尝试将@change 和@click 添加到羽毛图标，但没有成功，我还尝试添加这样的功能：

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'
    }
  }

请有人帮我实现这个，我想使用羽毛图标切换主题，但我可以使用单选按钮来完成，但这不是我想要的。

Answer 1

我查看了 vue-feather-icons here 的实现它缺少事件处理程序。如果是这样，则意味着这些组件不会发出任何事件。

我建议您将事件处理程序移至图标周围的 div。看看我在这里做了什么作为例子：https://codesandbox.io/s/distracted-noether-gud0p?file=/src/App.vue

VueJS - 如何通过单击图标在 vuexy 中的深色和浅色主题之间切换

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

icons

themes

toggle

vue.js