javascript 你如何使用 Vue.js 切换按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46814304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you toggle a button with Vue.js?
提问by stormynpip
Note:Using Vue.js and Vuetify.js for functionality and styling.
注意：使用 Vue.js 和 Vuetify.js 来实现功能和样式。
With :classand @clickproperties, 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.
使用:class和@click属性，我能够将按钮的背景颜色更改为所需的颜色，但它会将更改应用于所有这些，而不仅仅是我单击的那个。
Question: How do I have a button toggled without having all of them toggled at once?
问题：如何在不同时切换所有按钮的情况下切换按钮？
In my vue file:
在我的 vue 文件中：
<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>
In the scriptsection of same vue file:
在script同一个 vue 文件的部分：
<script>
export default {
data: function() {
return {
companies,
msg: "indiv",
dashboards: ['profile', 'charts'],
isToggled: false
}
},
methods: {
}
}
</script>
I've read through this question, but I get a Vue warning, mentioning that I have isToggledmethod as already defined data property. Toggle Class for an item Vue.js
我已经通读了这个问题，但是我收到了一个 Vue 警告，提到我有isToggled方法作为已经定义的数据属性。Vue.js 项目的切换类
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
我还通读了有关数据绑定的 vue.js 文档，但仍然需要这方面的帮助。 https://vuejs.org/v2/guide/class-and-style.html
Vuetify framework has toggled buttons components, but client wants a distinct style, so cannot use this. https://vuetifyjs.com/components/buttons
Vuetify 框架有切换按钮组件，但客户想要一个独特的风格，所以不能使用它。 https://vuetifyjs.com/components/buttons
回答by Mr. Meeseeks
Make another vue file (lets call it button.vue)...
制作另一个 vue 文件（我们称之为button.vue）...
button.vue
按钮.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
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>
Note:CustomButtonand button.vuecan be renamed to whatever is convenient for you
注意：CustomButton并且button.vue可以重命名为您方便的任何名称
This would allow each custom-buttonto have its own data that can now be toggled!
这将允许每个custom-button人拥有自己的数据，现在可以切换！
回答by skribe
I would use @clickwith a function and pass the $eventto it, then use javascripts classList.togglefunction to apply a css class or use .toggle()do whatever else you want.;
我会使用@click一个函数并将其传递$event给它，然后使用 javascriptsclassList.toggle函数来应用 css 类或使用.toggle()做任何你想做的事情。
@click="myToggleFunction($event)"
Then
然后
methods: {
myToggleFunction: function(event){
let button = event.target;
button.classList.toggle('toggled');
}
}
