如何使用 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 方法作为已经定义的数据属性。

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

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

Answer 1

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

@click="myToggleFunction($event)"

然后

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

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

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

How do you toggle a button with Vue.js?

javascript

vue.js

vuejs2

vuetify.js