v-model på alla formulärelement
Input, textarea, select, checkbox, radio – hur v-model anpassas efter varje elementtyp.
v-model på alla formulärelement är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Binda formulärfält
v-model skapar en tvåvägsbindning mellan formulärkontroller och ert reaktiva tillstånd. Olika typer av kontroller — textfält, kryssrutor, radioknappar, select och textarea — använder v-model på lite olika sätt. Den här lektionen går igenom dem alla.
Textfält
I ett textfält binder v-model värdet och uppdaterar det vid inmatning. Skriv i rutan så uppdateras ref-värdet direkt.
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>
<template>
<input v-model="name" />
<p>Hello, {{ name }}</p>
</template>Textarea
En textarea fungerar precis som ett textfält. Använd v-model direkt på elementet — lägg inte text mellan taggarna.
<template>
<textarea v-model="message"></textarea>
</template>Kryssruta: Booleskt värde
En enskild kryssruta som är bunden till en boolesk ref växlar mellan true och false.
<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>
<template>
<input type="checkbox" v-model="agreed" />
<p>Agreed: {{ agreed }}</p>
</template>Kryssrutor: Flera värden i en array
Bind flera kryssrutor till samma array-ref. Varje markerad kryssruta lägger till sitt value i arrayen.
<script setup>
import { ref } from 'vue'
const hobbies = ref([])
</script>
<template>
<input type="checkbox" value="reading" v-model="hobbies" />
<input type="checkbox" value="coding" v-model="hobbies" />
<p>{{ hobbies }}</p>
</template>Radioknappar
Radioknappar i en grupp delar på en ref. Ref-värdet är value för det valda alternativet.
<script setup>
import { ref } from 'vue'
const picked = ref('')
</script>
<template>
<input type="radio" value="small" v-model="picked" />
<input type="radio" value="large" v-model="picked" />
<p>Picked: {{ picked }}</p>
</template>Select: Ett val
En select binds till ett värde som motsvarar det valda alternativet. Lägg gärna till ett platshållaralternativ med ett tomt värde.
<script setup>
import { ref } from 'vue'
const city = ref('')
</script>
<template>
<select v-model="city">
<option value="">Choose</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</template>Select: Flera val
Lägg till attributet multiple och bind till en array. De valda alternativen samlas i arrayen.
<script setup>
import { ref } from 'vue'
const cities = ref([])
</script>
<template>
<select v-model="cities" multiple>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</template>Värdemodifierare
Modifierare finjusterar v-model: .trim tar bort blanksteg, .number omvandlar till ett tal och .lazy synkroniserar vid ändring i stället för vid varje tangenttryckning.
<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />En mental modell
Oavsett kontroll innebär v-model att ett värde skickas in och en ändring skickas ut. Kontrolltypen avgör bara vilken form värdet får: ett booleskt värde, en sträng eller en array.
Egna input-komponenter
v-model fungerar även på era egna komponenter. En anpassad input deklarerar en prop med namnet modelValue och skickar ut update:modelValue, så att den fungerar som en inbyggd kontroll för sin överordnade komponent.
<!-- parent -->
<MyTextInput v-model="name" />
<!-- child declares modelValue + emits update:modelValue -->Snabbtest
Testa era kunskaper om formulärbindning.
Sammanfattning
v-model för formulärkontroller:
- Textfält och textarea binder en sträng.
- En enskild kryssruta binder ett booleskt värde; flera kryssrutor binder en array.
- Radioknappar delar på en ref som innehåller det valda värdet.
- Select binder ett värde; med
multiplebinder den en array. - Modifierare:
.trim,.number,.lazy.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”v-model på alla formulärelement” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”v-model på alla formulärelement”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”v-model på alla formulärelement”?
Input, textarea, select, checkbox, radio – hur v-model anpassas efter varje elementtyp. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”v-model på alla formulärelement”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- v-model på alla formulärelement
- Skicka och återställa formulär
- Mönster för manuell validering
- VeeValidate för schemabaserad validering