VueJS -如何通过点击图标在vuejy中切换深色和浅色主题

Question

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

下面是使用vs-单选按钮的代码:

<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的实现而且它缺少事件处理程序。如果是这种情况，那就意味着这些组件不会发出任何事件。

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