如何用Vue.js切换按钮？

注意：使用Vue.js和Vuetify.js的功能和样式。如何用Vue.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

来源

2017-10-18 pshn

您需要为每个按钮单独使用一个'isToggled'，比如'localOfferIsToggled'。 – ceejayoz

每个按钮都应该是一个单独的组件，以便它们具有对其自身状态的内部引用。你现在正在做的是更新所有按钮实例中**共享**的全局状态。 – Terry

@Terry你能否详细说明你的评论？ – pshn

再拍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有它自己的数据，现在可以切换！

来源

2017-10-18 20:21:56

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

@click="myToggleFunction($event)"

然后

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

来源

2017-10-18 16:42:21 skribe

您不需要显式传递'@ click'处理程序中的'$ event'对象，它会隐式传递。另外，'toggleClass'是一个jQuery函数。在普通的JS中，你需要使用'button.classList.toggle（'切换'）' – thanksd

是的你是对的！它应该是'classList.toggle（）' – skribe

如何用Vue.js切换按钮？

回答

相关问题