este es el código html
<body> <section> <h1>client profile informations</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>el nuevo nombre se presiona cada vez que sea cual sea la condición
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> **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}); } **empty the input field** this.newstu ='' this.newgpa='' } } </script> </body>addio() en realidad no está comprobando si la entrada ya existe en this.grades[] . Solo compara newstu (el nombre del estudiante recién ingresado) con this.grades.name , que no existe porque this.grades es un Array .
Una solución es usar Array.prototype.find() para buscar en this.grades[] una entrada coincidente. Cada devolución de llamada a find() recibe una entrada de matriz, que se puede usar para comparar la propiedad de name de la entrada con this.newstu . Si no se encuentra la entrada, find() devuelve undefined , por lo que puede usar la llamada en una declaración if :
if (this.grades.find(grade => grade.name === this.newstu)) { // already exists...ignore } else { // new entry this.grades.push({ name: this.newstu, gpa: this.newgpa }) }