Previously, this code was working fine, but now it has stopped functioning and I can't figure out why. I've tried reorganizing things and changing values, but I keep encountering the same error. If someone could point out where to add a line, that would be really helpful. I'm stumped because I have everything mentioned in methods and get the value during the button click.
const {
createApp
} = Vue
createApp({
data() {
return {
mins: 0,
cats: 0,
xp: 0,
buttons: [{
name: "Gym",
increaseValue: 10
}, {
name: "Sleep",
increaseValue: 2
}, {
name: "Eat",
increaseValue: 3
}]
}
},
methods: {
increaseXp(increaseValue) {
this.xp += increaseValue
}
}
}).mount('#app')<head>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdn.tailwindcss.com/"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Name</title>
</head>
<body class="bg-sky-100">
<div id="app">
<div class="max-w-3xl mx-auto">
<h1 class="font-bold text-7xl border-b-4 pb-4 border-black w-fit text-center font-mono">Name of App</h1>
<h2 class="font-bold text-2xl text-center mt-5">
LEVEL
</h2>
<h3 class="text-center">
{{xp}}
</h3>
</div>
<div class="grid grid-cols-3 gap-3 px-3 mt-6">
<button onClick="increaseXp(button.increaseValue)" v-for="button in buttons" class="py-2 border border-black rounded bg-sky-300">
{{button.name}}
</button>
</div>
</div>
</body>