Andmeside kahesuunaline seostamine sisendväljadega Vue's

Nüüd õpime töötama sisendväljadega Vue raamistikus. Nende abil lisame lehele andmeid reaktiivselt. Alustame. Olgu meil sisendväli:

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

Olgu meil ka omadus message:

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

Saame seostada selle omaduse ja sisendvälja nii, et ühe muutumine põhjustab teise muutumise. See tehakse direktiivi v-model abil, kus määratakse sisendväljaga seotud omadus.

Seostame oma sisendväljaga omaduse message:

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

Pärast koodi käivitamist on sisendväljas omaduse message tekst. Kui muuta sisendvälja andmeid, muutub omadus vastavalt. Et seda näha, kuvame sisestatud sisu mõnes lõigus:

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