search icon

Vue – Events

I Vue bruges “directives” til events. Det ligner HTML-attributes, der er specifikke for Vue. Her ses et directive, der er sat til click. Vue har 2 way binding, så når man klikker på knappen bliver book_number ændret i app og på samme tid bliver teksten på siden man laver ændret

<!--html-->
<button v-on:click="title = 'A Clash of Kings'">Change book title</button>
<button v-on:click="book_number++">Change book number</button>

Da man bruger events ofte kan v-on: erstattes med @

<!--html-->
<button @click="title = 'A Clash of Kings'">Change book title</button>
<button @click="book_number++">Change book number</button>

Andre events

  • v-on:mouseover (@mouseover)
  • v-on:mouseleave (@mouseleave)
  • v-on:dblclick (@dblclick)

Vær opmærksom på, at man kan bruge event objektet som ved eventhandlers i vanilla JS. Vil man bruge flere argumenter end bare event objektet gøres det sådan her

<!--html-->
<button @click="myFunction($event, 5)">Click here</button>

Læs mere om Vue

Skriv et svar

Verified by MonsterInsights