如何用Vue.js切换按钮？

Question

注意：使用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方法作为已定义的数据属性。 Toggle Class for an item Vue.js

我还通读了关于数据绑定的vue.js文档，但仍需要帮助。 https://vuejs.org/v2/guide/class-and-style.html

Vuetify框架已经切换按钮组件，但客户端想要一个独特的风格，所以不能使用它。 https://vuetifyjs.com/components/buttons

Answer 1

再拍VUE文件（可以称之为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_par ent.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有它自己的数据，现在可以切换！

Answer 2

我会用@click与函数并通过$event给它，然后使用JavaScript的classList.toggle功能应用CSS类或使用.toggle()做任何你想要别人;

@click="myToggleFunction($event)" 

然后

methods: { 
    myToggleFunction: function(event){ 
     let button = event.target; 
     button.classList.toggle('toggled'); 
    } 
}