I stedet for at ændre på indhold fra et komponent kan man lave methods i Vue, der kan startes med et klik. Her oprettes en method i app.js og startes med en button i index.html.
// app.js
const app = Vue.createApp({
data() {
return {
title: 'Game of Thrones',
author: 'George R.R. Martin',
book_number: 1
}
},
methods: {
changeBook() {
this.title = 'A Clash of Kings'
this.book_number = 2
}
}
})
app.mount('#app')<!--index.html-->
<body>
<div id="app">
<p>{{ title }} - by {{ author }}</p>
<p>Book in series: {{ book_number }}</p>
<button @click="changeBook">Change Book</button>
</div>
<script src="app.js"></script>
</body>Her kan også bruges argumenter som bruges i en method
<!--html-->
<button @click="changeBook('A Storm of Swords')">Change Book</button>- Introduktion til VueJS
- Vue – Events
- Vue – Methods
- Vue – Directives
- Vue – Attribute binding
- Vue – Computed properties
- Vue – refs
Læs mere om Vue
