[英]How do you toggle a button with Vue.js?
注意:使用 Vue.js 和 Vuetify.js 来实现功能和样式。
使用:class
和@click
属性,我能够将按钮的背景颜色更改为所需的颜色,但它会将更改应用于所有这些,而不仅仅是我单击的那个。
问题:如何在不同时切换所有按钮的情况下切换按钮?
在我的 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>
在同一 vue 文件的script
部分:
<script>
export default {
data: function() {
return {
companies,
msg: "indiv",
dashboards: ['profile', 'charts'],
isToggled: false
}
},
methods: {
}
}
</script>
我已经阅读了这个问题,但是我收到了一个 Vue 警告,提到我有isToggled
方法作为已经定义的数据属性。 切换项目的类 Vue.js
我还阅读了有关数据绑定的 vue.js 文档,但仍然需要这方面的帮助。 https://v2.vuejs.org/v2/guide/class-and-style.html
Vuetify 框架有切换按钮组件,但客户端想要一个独特的样式,所以不能使用它。 https://vuetifyjs.com/components/buttons
制作另一个 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
// 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
可以重命名为任何你方便的名字
这将允许每个custom-button
拥有自己的数据,现在可以切换!
我会使用@click
和一个函数并将$event
传递给它,然后使用 javascripts classList.toggle
函数来应用 css 类或使用.toggle()
做任何你想做的事情。
@click="myToggleFunction($event)"
然后
methods: {
myToggleFunction: function(event){
let button = event.target;
button.classList.toggle('toggled');
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.