如何確定在Vue js中是否選中了復選框

Question

我只想確定在 Vue js 2 中是否選中了一個復選框。在 jquery 中，我們有像$('input[type=checkbox]').prop('checked');這樣的函數。 如果復選框被選中或未選中，它將返回 true。 Vue js 中的等價函數是什么。

這是帶有代碼的場景。 請注意，我使用 laravel 及其刀片模板。

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

js部分是

<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>

Answer 1

您可以執行以下操作：

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

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

samplefunction : function(value,event) {
    if (event.target.checked) {
       alert('isSelected');
    }
}

Answer 2

這對我有用。

<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
  }
}