Wie schaltest du eine Taste mit Vue.js?

Question

Hinweis: Verwenden von Vue.js und Vuetify.js für Funktionalität und Styling.

Mit :class und @click Eigenschaften konnte ich die Schaltfläche Hintergrundfarbe, um die gewünschte Farbe ändern, aber es gilt die Änderung alle von ihnen, und nicht nur die, die ich angeklickt.

Frage: Wie kann ich einen Schalter umschalten, ohne alle Schalter gleichzeitig schalten zu müssen?

In meiner vue-Datei:

<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> 

Im script Abschnitt gleicher vue-Datei:

<script> 
    export default { 
    data: function() { 
     return { 
     companies, 
     msg: "indiv", 
     dashboards: ['profile', 'charts'], 
     isToggled: false 
     } 
    }, 
    methods: { 

    } 
    } 
</script> 

ich durch diese Frage gelesen habe, aber ich erhalte eine Warnung Vue, zu erwähnen, dass Ich habe isToggled Methode als bereits definierte Daten Eigenschaft. Toggle Class for an item Vue.js

Ich lese auch durch vue.js docs auf Datenbindung, aber immer noch brauchen Hilfe zu diesem Thema.

Vuetify Rahmen hat Tastenkomponenten umgeschaltet, aber Client will einen eindeutigen Stil, so kann dies nicht verwenden. https://vuetifyjs.com/components/buttons

Answer 1

andere vue Datei Stellen (nennen wir es 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> 

Hinweis:CustomButton und button.vue können umbenannt werden, was auch immer für Sie

bequem

Dies würde es ermöglichen jede custom-button seine eigenen Daten zu haben, die jetzt umgeschaltet werden kann!

Answer 2

Ich würde @click mit einer Funktion verwenden und die $event es passieren, dann javascripts classList.toggle Funktion verwenden, um eine CSS-Klasse anwenden oder verwenden .toggle() tun, was immer Sie wollen .;

@click="myToggleFunction($event)" 

Dann

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