Question

注意：使用Vue.js和Vuetify.js进行功能和样式化。

使用<label htmlFor="myUniqueId">Select time</label> <fieldset id="myUniqueId"> {/* component container */} <div> {/* container for hours:minutes */} <input aria-label="hours" /> {/* hours */} <input aria-label="minutes" /> {/* minutes */} </div> <Select aria-label="AM or PM" /> {/* custom React component, for AM/PM */} </fieldset>和:class属性，我可以将按钮的背景颜色更改为所需的颜色，但它将更改应用于所有，而不仅仅是我点击的那个。

问题：如何在不将所有按钮切换的情况下切换按钮？

在我的vue文件中：

@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>部分：

script

我已经阅读了这个问题，但是我收到了Vue警告，提到我已将<script> export default { data: function() { return { companies, msg: "indiv", dashboards: ['profile', 'charts'], isToggled: false } }, methods: { } } </script>方法作为已定义的数据属性。 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

我会将@click与函数一起使用并将$event传递给它，然后使用javascripts classList.toggle函数来应用css类或使用.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切换按钮？

2 个答案: