this code snippet is written in HTML
<body>
<section>
<h1>information about client profiles</h1>
<div class="madaro" v-on:click.right.prevent>
<div>
<input v-model="newstu" type="text">
<input v-model="newgpa" type="number" @keyup.enter="addio">
<button @click="addio" > submit</button>
</div>
<h1 v-for="grade in grades">
Student {{grade.name}} has final grade {{grade.gpa}}
</h1>
</div>
</section>
the new name gets added every time no matter what the condition is
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
**initialize the array**
grades:[
{
name:'pac',
gpa:'4'
},
{
name:'ray',
gpa:1.2
},
{
name:'ssy',
gpa:4.4
},
{
name:'snri',
gpa:3.5
},
{
name:'safa',
gpa:1.7
},
{
name:'mohammed',
gpa:5
},
{
name:'mammt',
gpa:4.1
}
],
newgpa:'',
newstu:''
},
*the function*
methods:{
addio(){
if (this.grades.name === this.newstu) {
console.log('hyhy');
} else {
return this.grades.push({name:this.newstu , gpa:this.newgpa});
}
**clear the input fields**
this.newstu =''
this.newgpa=''
}
}
</script>
</body>