web-dev-qa-db-fra.com

Comment déterminer si une case à cocher est cochée ou non dans Vue js

Je veux simplement déterminer si une case à cocher est cochée ou non dans Vue js 2. Dans jQuery, nous avons des fonctions comme $ ('input [type = checkbox]'). Prop ('coché'); qui retournera true si la case à cocher est cochée ou non. Quelle est la fonction équivalente dans Vue js. 

Voici le scénario avec le code. S'il vous plaît noter que j'utilise laravel avec ses modèles de lame.

@foreach ($roles as $role)
   <input type="checkbox" v-on:click="samplefunction({{$role->id}})" v-model="rolesSelected" value="{{$role->id}}">                       
@endforeach

La partie js est 

<script>
  var app = new Vue({
    el: '#app1',
    data: {
      rolesSelected:"",
    },
    methods : {
      samplefunction : function(value) {
        // Here i want to determine whether this checkbox is checked or not   
      }
    },
  });

</script>
javascriptlaravelvue.jsvuejs2
5
Geordy James

Vous pouvez faire quelque chose comme:

if(this.rolesSelected != "") {
   alert('isSelected');
}

ou v-on:click="samplefunction({{$role->id}},$event)"

samplefunction : function(value,event) {
        if (event.target.checked) 
      }
11
madalinivascu

Cela a fonctionné pour moi.

<input type="checkbox" :id="poid" class="unchecked" name="single_select" ref="rolesSelected">

function (){
  if(this.$refs.rolesSelected.checked == false) {
    //do something
  }
}

function (){
  if(this.$refs.rolesSelected.checked == true) {
    //do something
  }
}
1
Raj