你如何使用 Vue.js 切换按钮? [英] How do you toggle a button with Vue.js?
问题描述
注意:使用 Vue.js 和 Vuetify.js 来实现功能和样式.
Note: Using Vue.js and Vuetify.js for functionality and styling.
使用 :class
和 @click
属性,我能够将按钮的背景颜色更改为所需的颜色,但它会将更改应用于所有这些,而不仅仅是我点击的那个.
With :class
and @click
properties, I was able to change the button's background color to desired color, but it applies the change to all of them, and not just the one that I clicked on.
问题:如何在不同时切换所有按钮的情况下切换按钮?
在我的 vue 文件中:
In my vue file:
<v-layout>
<v-flex md6>
<v-text-field>Welcome.</v-text-field>
</v-flex md6>
<v-flex id="icon-filter">
<span>Filter by:</span>
<v-btn class="filter-button" :class="{toggled: isToggled}" @click="isToggled = !isToggled"><v-icon>local_offer</v-icon></v-btn>
<v-btn class="filter-button" :class="{toggled: isToggled}" @click="isToggled = !isToggled"><v-icon>notifications</v-icon></v-btn>
</v-flex>
</v-layout>
在同一个 vue 文件的 script
部分:
In the script
section of same vue file:
<script>
export default {
data: function() {
return {
companies,
msg: "indiv",
dashboards: ['profile', 'charts'],
isToggled: false
}
},
methods: {
}
}
</script>
我已经通读了这个问题,但是我收到了一个 Vue 警告,提到我有 isToggled
方法作为已经定义的数据属性.Vue.js 项目的切换类
I've read through this question, but I get a Vue warning, mentioning that I have isToggled
method as already defined data property. Toggle Class for an item Vue.js
我还阅读了有关数据绑定的 vue.js 文档,但仍然需要这方面的帮助.https://vuejs.org/v2/guide/class-and-style.html
I also read through vue.js docs on data binding, but still need help on this. https://vuejs.org/v2/guide/class-and-style.html
Vuetify 框架有切换按钮组件,但客户想要一个独特的风格,所以不能使用它.https://vuetifyjs.com/components/buttons
Vuetify framework has toggled buttons components, but client wants a distinct style, so cannot use this. https://vuetifyjs.com/components/buttons
推荐答案
制作另一个 vue 文件(我们称之为 button.vue)...
Make another vue file (lets call it button.vue)...
button.vue
// template
<v-btn class="filter-button" :class="{toggled: isToggled}" @click="isToggled = !isToggled">
<slot></slot>
</v-btn>
// script
export default {
data: function () {
return {
isToggled: false
}
}
}
your_parent.vue
// script
import CustomButton from './button.vue'
export default {
components: { CustomButton },
data...
}
// template
<v-layout>
<v-flex md6>
<v-text-field>Welcome.</v-text-field>
</v-flex md6>
<v-flex id="icon-filter">
<span>Filter by:</span>
<custom-button><v-icon>local_offer</v-icon></custom-button>
<custom-button><v-icon>notifications</v-icon></custom-button>
</v-flex>
</v-layout>
注意: CustomButton
和 button.vue
可以重命名为任何你方便的东西
Note: CustomButton
and button.vue
can be renamed to whatever is convenient for you
这将允许每个 custom-button
拥有自己现在可以切换的数据!
This would allow each custom-button
to have its own data that can now be toggled!
这篇关于你如何使用 Vue.js 切换按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!