Question

我在VueJS的v-for循环内传递if条件时遇到问题。我想查看文本字段中的值是否大于30以发出警报，但我不知道如何在循环内调用函数。这是我的代码：我尝试使用v-if，但仍然不幸运

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"> 
 </script>
 <tbody>
<tr> v-for="item in marksData">
<td>{{item.studentName}}</td>
<td>{{item.studentRegNo}}</td>
<td><input v-model.number="item.cat1Marks" required="required" /> *...V-if 
to check the condition here.... or call any function to check*</td>
<td><button v-on:click.prevent="saveMarks(item)" 
type="submit">Save</button></td>
</tr>
</tbody>
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 > 30 && item.cat1Marks > 0) {
            alert("Marks should be less than 30");
          }
          console.log(mark);
          return mark;
        }
        }

Answer 1

如果我理解您的问题。我认为您应该先检查input。然后根据需要返回alert()。

内部方法

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

内部计算得出：

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

也在评论中提到。您应该更正v-for的错字。

Answer 2

html不会引起自身警报，因此您必须在创建的函数中运行checkdata。

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");
    }
}
}

Answer 3

   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>

在Vue JS的V-For循环内使用if条件

3 个答案: