Kaksisuuntainen datan sitominen input-kenttiin Vue:ssa

Nyt opimme työskentelemään input-kenttien kanssa Vue-kehyksessä. Niiden avulla lisäämme reaktiivisesti dataa sivulle. Aloitetaan. Olkoon meillä input-kenttä:

App.vue<template>
  <input>
</template>

Olkoon meillä myös ominaisuus message:

javascriptdata() {
  return {
    message: 'hello',
  }
}

Voimme yhdistää tämän ominaisuuden ja input-kentän siten, että minkä tahansa niistä muuttaminen johtaa toisen muuttumiseen. Tämä tehdään käyttämällä direktiiviä v-model, jossa määritetään input-kenttään sidottu ominaisuus.

Sidotaan input-kenttäämme ominaisuus message:

App.vue<template>
  <input v-model="message">
</template>

Koodin käynnistämisen jälkeen input-kentässä on teksti ominaisuudesta message. Ja jos muokkaat dataa input-kentässä - ominaisuus myös muuttuu vastaavalla tavalla. Nähdäksesi tämän, esitetään input-kenttään syötetty sisältö jossain kappaleessa:

App.vue<template>
  <input v-model="message">
  <p>{{ message }}</p>
</template>