javascript - 在Vue中的复选框中使用V-for(Using V-for in checkboxes in vue)

Question

I am able to list values and save them to the database without any problem using axios>>vue JS>>spring boot.

(我可以使用axios >> vue JS >> spring boot列出值并将其保存到数据库中。)

My problem I want to trigger my save method only when checkbox is selected or true in Vue JS.

(我的问题是我只想在Vue JS中选中复选框或为true时才触发保存方法。)

In my case am using v-on:change in my checkbox but the method get invoked every time i click the checkbox.

(就我而言，我在复选框中使用v-on：change，但是每次我单击复选框时都会调用该方法。)

is there a way I can invoke my save method only when the checkbox is selected(true).

(有没有一种方法可以仅在选中复选框（true）时调用我的save方法。)

my data from the database get displayed as shown

(我的数据库数据显示如下)

here is my code:

(这是我的代码：)

      <thead>
          <tr>  <th>ID</th>
                <th>Subject Name</th>
                <th>Action</th>
         </tr>
    </thead>
          <tbody>
          <tr  v-for="item in subjectData">
                 <td>{{item.id}}</td> <td>{{item.subjectName}}</td>
        <td><input type="checkbox" v-on:change.prevent="saveMarks(item)" /></td>
                         </tr>  
    </tbody>
           </table>
   </div>
   <script>
var subjectStudentsVM=new Vue({
el:"#subjectStudentsSelection",
data:function(){    
    return {
        id: '',
        studid:'',
        subjectData:Array(),
    }
},

created:function (){
this.getAllSubjects();
},
methods:{
        saveMarks: function(item) {
        var self=this;
        axios({
          method:"POST",
          url:"/Student/"+this.studid+"/"+item.id, 
         // url:"/Student/2/2", 
              headers: {
                  'content-type': 'application/json',
              },
              data:{
                    }
            })
    },
    getAllSubjects:function(){
        var self=this;
          axios.get("/Subject/list/").then(function (response) {
                this.subjectData = response.data;
          }.bind(this)).catch(function (error) {
            console.log('Error while fetching subject data: ' + error)
          })
    },
}
})

  ask by user3736334 translate from so

Answer 1

You need to check inside your function saveMarks what the state of the checkbox is and only then save.

(你需要检查你函数内部saveMarks什么复选框的状态，然后才保存。)
Like so:

(像这样：)

 saveMarks: function(item,event) {
            var self=this;
            if (event.target.checked === true){
            axios({
              method:"POST",
              url:"/Student/"+this.studid+"/"+item.id, 
             // url:"/Student/2/2", 
                  headers: {
                      'content-type': 'application/json',
                  },
                  data:{

                        }

                })

                console.log("record  saved");
               }else{

                    console.log("record not saved");
                    //return

                }