Von Vue-script auf Vue-style zugreifen?

Hallo, in meiner Vue-Datei habe ich im script-Teil eine Funktion, die überprüft, ob es leere Eingabefelder gibt, bevor man einen Button drückt. Falls ja, sollten diese leeren Eingabefelder im style verändert werden. Beispielsweise wird dann das Eingabefeld etwas rot. Wie setze ich das um?

PS: Die Überprüfungsfunktion brauch ich nicht mehr, nur noch wie ich quasi auf den style zugreife und etwas verändere.

Answer 1

[Verelat777]

Dazu erstellst Du eine Klasse, die beim Klicken des Buttons bei den entsprechenden Eingabefeldern eingefügt wird. Von Inline-Styles und direkten Abänderungen des Stylesheets würde ich aus diversen Gründen abraten (siehe StackOverflow).

Die Klasse rot wird hier abhängig vom Wert der Variable markiert hinzugefügt (oder auch entfernt). Unter data wird die Boolean-Variable markiert initialisiert bzw. definiert. Der Eventhandler @click bewirkt, dass beim Anklicken des Buttons die Funktion klick() ausgeführt wird. Diese setzt die Variable markiert auf true, sodass die Klasse rot gesetzt wird und sich die Textfarbe des Eingabefelds ändert:

<div id="app">
    <input type="text" :class="{ rot: markiert }" />
    <button @click="klick">Klick</button>
</div>

.rot {
    color: red;
}

const app = Vue.createApp({
    data() {
        return {
            markiert: false
        }
    },
    methods: {
        klick() {
            this.markiert = true;
        }
    }
});
app.mount("#app");