Looking for some help with setting up a welcome message using an input field in Vue.js. I am trying to store the username in a data property called username: ''. However, when I attempt to access it within the methods, I receive an error stating that 'username' is not defined. Here is the code snippet:
<template>
<aside>
<h3>Welcome {{ username }}</h3>
<form action="">
<h3>Welcome to smart-z todolist</h3>
<p>Please write down your name</p>
<div>
<input type="text" :v-model="username" id="userName" />
<button type="submit" @click.prevent="addUser">Done</button>
</div>
</form>
</aside>
</template>
<script>
export default {
name: "AsideSect",
data() {
return {
username: "",
};
},
methods: {
addUser: () => {
console.log(username);
},
},
};
</script>
If you have any insights or solutions, please share them below and much appreciated!