[Vuejs]-Using an if condition inside a V-For Loop in Vue JS

by

0👍

If I understand your question. I think you should check the input first. Then return the alert() if it’s necessary.

inside methods

giveAlert(){
    alert("Marks should be less than 30");
}

inside computed:

checkInput(val){
     if (val > 30 && val > 0) {
          this.giveAlert()
     } else {//do nothing}
}

Also mentioned in the comments. You should correct the typo of v-for.

0👍

the html will not cause a alert it’s self so you have to run the checkdata in the created function.

created:function(){
this.getAllSubjects();
for(var i=0;i<this.marksData.length;i++){
    var item=this.marksData[i];
    if(item.cat1marks>30){
        alert("marks should be less than 30");
    }
}
}

0👍

Computed variable are defined as functions cause they react on changes in the reactive varables of the vue component. But they are not designed to expect any variable passing them directly.

Use subcomponent created hook like this:

<div id="app">
    <p v-for="student in marksData">
      <mystudent :student="student" />
    </p>
  </div>
  <script>
  var app = new Vue({
      el: "#app",
      data: function() {
        return {
          marksData: [{
            studentName: 'Alan',
            studentRegNo: 1,
            cat1Marks: 21
          },{
            studentName: 'Jessica',
            studentRegNo:2,
            cat1Marks: 31
          },{
            studentName: 'Joe',
            studentRegNo: 3,
            cat1Marks: 4
          }],
        }
      },
      components: {
        Mystudent: {
          props: ['student'],
          created() {
            if (this.student.cat1Marks > 30) alert(`Student ${ this.student.studentName } reached ${ this.student.cat1Marks } mark`)
          },
          render (h) {
          return h('span', `Name: ${ this.student.studentName } RegNo: ${ this.student.studentRegNo } Marcs: ${ this.student.cat1Marks }`)
          }
        }
      }
  });
</script>

UPDATED

After the comment i realized that i didn’t understood the question
So here is updated code example, where the score check is in method section not in computed and the trigger is the @change event. Notice the @change triggers first when the focus is taken out of the input field.

<div id="app">
    <p v-for="(student, i) in marksData">
      Student: {{ student.studentName }} Mark: <input v-model="student.cat1Marks" type="text" @change="checkStudent(student)">
    </p>
  </div>
  <script>
  var app = new Vue({
      el: "#app",
      data: function() {
        return {
          test: 1,
          marksData: [{
            studentName: 'Alan',
            studentRegNo: 1,
            cat1Marks: 21
          },{
            studentName: 'Jessica',
            studentRegNo:2,
            cat1Marks: 31
          },{
            studentName: 'Joe',
            studentRegNo: 3,
            cat1Marks: 4
          }],
        }
      },
      methods: {
        checkStudent (student) {
          if (student.cat1Marks > 30) alert(`Student ${student.studentName } reached ${ student.cat1Marks } mark`)
        }
      }
  });
</script>

0👍

   For anyone having a similar problem I added this function


     up(item){
          if (item.cat1Marks > 30) {
              item.cat1Marks=0;
                  alert("Marks cannot be greater than 30")
          }else{}
          },
  //and called this function in my input
      <td> <input  type="text" name="cat1Marks" 
      v-model.number="item.cat1Marks" v on:input="up(item)" 
       required="required" /></td>

Leave a comment