Henting av skjemadata ved hendelse i Vue

La oss si at vi har en knapp og et input-felt, der et tall skrives inn. La oss ved et trykk på knappen skrive ut kvadratet av tallet som er skrevet inn i input-feltet. La oss starte implementeringen.

For å løse oppgaven trenger vi to egenskaper. Egenskapen num vil endres etter hvert som data skrives inn i input-feltet, og i egenskapen res vil vi skrive resultatet av opphøyning i kvadrat:

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

La oss nå lage et input-felt, binde det til egenskapen num, lage en knapp, der et klikk på den vil utføre metoden calc, og også lage et avsnitt, der resultatet vil bli vist:

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

La oss skrive implementeringen av metoden calc:

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

Resultatet blir at så snart metoden calc kalles (og dette skjer ved et trykk på knappen), vil resultatet skrives til egenskapen res og samtidig vises i vårt avsnitt.