I have a Vue JS modal component that is supposed to display all the names typed in the form, but it isn't working. As a newcomer to Vue JS, I'm having trouble understanding why it's not functioning properly. Additionally, I am unable to use shorthands. Can anyone offer some guidance on how to troubleshoot this issue? Thank you in advance. Here is the code snippet:
<template>
<div class="template_class">
<div>
<b-btn v-b-modal.modal1>Launch demo modal</b-btn>
<!-- Main UI -->
<div class="mt-3 mb-3">
Submitted Names:
<ul>
<li v-for="n in names">{{n}}</li>
</ul>
</div>
<!-- Modal Component -->
<b-modal id="modal1" title="Submit your name" @ok="submit" @shown="clearName">
<form @submit.stop.prevent="submit">
<b-form-input type="text" placeholder="Enter your name" v-model="name"></b-form-input>
</form>
</b-modal>
</div>
</div>
</template>
<script>
export default {
data: {
name: '',
names: []
},
methods: {
clearName() {
this.name = '';
},
submit(e) {
if (!this.name) {
alert('Please enter your name');
return e.cancel();
}
this.names.push(this.name);
this.name = '';
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>