如何使用 Vue.js 切换按钮？

Posted 2023-02-23

【中文标题】如何使用 Vue.js 切换按钮？

【英文标题】：How do you toggle a button with Vue.js?

【发布时间】：2018-03-30 13:42:38

【问题描述】：

注意：使用 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

【问题讨论】：

每个按钮都需要一个单独的isToggled，例如localOfferIsToggled。

每个按钮都应该是一个单独的组件，这样它们就可以对自己的状态进行内部引用。您现在正在做的是更新在所有按钮实例之间共享的全局状态。

@Terry 你能详细说明你的评论吗？

@Pusheenicorn 这个问题的接受答案是特里所描述的一个例子。 ***.com/questions/46791340/…

看看这篇文章webomnizz.com/create-toggle-switch-button-with-vue-js，它有助于创建自己的自定义按钮

【参考方案1】：

我会将@click 与函数一起使用并将$event 传递给它，然后使用javascripts classList.toggle 函数来应用css 类或使用.toggle()做任何你想做的事情。;

@click="myToggleFunction($event)"

然后

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

【讨论】：

您不需要在内联 @click 处理程序中显式传递 $event 对象，它会隐式传递。此外，toggleClass 是一个 jQuery 函数。在纯 JS 中，您需要使用 button.classList.toggle('toggled')

是的，你是对的！应该是classList.toggle()

【参考方案2】：

制作另一个 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_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 拥有自己的数据，现在可以切换！