Formos duomenų gavimas pagal įvykį Vue

Tarkime, kad turime mygtuką ir įvesties lauką, į kurį įvedamas skaičius. Paspaudus mygtuką atspausdinkime įvesto skaičiaus kvadratą. Pradėkime įgyvendinimą.

Užduočiai išspręsti mums reikės dviejų savybių. Savybė num keisis kai įvedami duomenys į įvesties lauką, o į savybę res įrašysime kvadrato pakėlimo rezultatą:

javascriptdata() {
  return {
    num: 0,
    res: 0
  }
}

Dabar padarykime įvesties lauką, susiekime jį su savybe num, padarykime mygtuką, kuriį paspaudus bus vykdomas metodas calc, ir taip pat padarykime pastraipą, į kurią bus išvedamas rezultatas:

App.vue<template>
  <p>{{ res }}</p>
  <input v-model="num">
  <button v-on:click="calc">work</button>
</template>

Parašykime metodo calc implementaciją:

javascriptmethods: {
  calc: function() {
    this.res = this.num ** 2;
  }
}

Taip bus, kad kai tik bus iškviestas metodas calc (o tai atsitiks paspaudus mygtuką), į savybę res bus įrašytas rezultatas ir tuo pačiu metu atsispausdins mūsų pastraipoje.