title: Using an if condition inside a V-For Loop in Vue JS
body: <p>I am having a problem passing an if condition inside a <code>v-for</code> loop in VueJS. I want to see if a value in the text field is greater than 30 to give an alert but I can't figure out how i can call my function inside the loop. Here is my code: I have tried using <code>v-if</code> but still not lucky</p>
  
  <pre><code> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt; 
   &lt;/script&gt;
   &lt;tbody&gt;
  &lt;tr&gt; v-for="item in marksData"&gt;
  &lt;td&gt;{{item.studentName}}&lt;/td&gt;
  &lt;td&gt;{{item.studentRegNo}}&lt;/td&gt;
  &lt;td&gt;&lt;input v-model.number="item.cat1Marks" required="required" /&gt; *...V-if 
  to check the condition here.... or call any function to check*&lt;/td&gt;
  &lt;td&gt;&lt;button v-on:click.prevent="saveMarks(item)" 
  type="submit"&gt;Save&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  var subjectStudentsVM = new Vue({
        el: "#subjectStudentsSection",
        data: function() {
          return {
            id: '',
            studentRegNo: '',
            studentName: '',
            marksData: Array(),
          }
        },
  
        created: function() {
          this.getAllSubjects();
        },
        methods: {
          getAllSubjectStudents: function(subject) {
            var self = this;
            console.log(this.subject.subjectCode)
            axios.get("/Marks/students/" + 
        this.subject.subjectCode).then(function(response) {
  
              this.marksData = response.data;
  
            }.bind(this)).catch(function(error) {
              console.log('Error while fetching student data: ' + error)
            })
          },
          computed:{
            CheckData(item) {
            if (item.cat1Marks &gt; 30 &amp;&amp; item.cat1Marks &gt; 0) {
              alert("Marks should be less than 30");
            }
            console.log(mark);
            return mark;
          }
          }
  </code></pre>