Set checkbox with Vue data

Question

I have Vue data;

Like as app.$data.Result this result coming from server and it is just value(0-31) ;

I want to arrange my checkboxes with depend on this value;

This is checkboxes;

<div class="form-group">    
    <input class="checkbox" data-role="checkbox" data-caption="Issue1" id="ch1" value="1" /> 
    <input class="checkbox" data-role="checkbox" data-caption="Issue2" id="ch2" value="2">
    <input class="checkbox" data-role="checkbox" data-caption="Issue3" id="ch3" value="4" >
    <input class="checkbox" data-role="checkbox" data-caption="Issue4" id="ch4" value="8">
    <input class="checkbox" data-role="checkbox" data-caption="Issue5" id="ch5" value="16" >
</div>

I can set them by coming data with their using Id's

if (app.$data.Result == 1) {
      $("#ch1").prop("checked", true);
   }

But this way is too long because app.$data.Result can be like "3" and i must checked Issue1 and Issue2 also when User click any checkbox ,i need add/sub app.$data.Result so how can i solve this problem with Vue.

One possible solution is binding checked attribute <input class="checkbox" data-role="checkbox" data-caption="Issue1" id="ch1" value="1" :checked="$data.Result === 1"/>. Btw, you should consider using v-for for similar component — ittus
– ittus, Commented May 10, 2018 at 9:39
Thanx for suggestion @ittus but how can i subtract value when User click for uncheck. — JohnConnor
– JohnConnor, Commented May 10, 2018 at 9:48
You should use data-driven pattern in vue,do not try to manipulate the dom yourself. — jacky
– jacky, Commented May 10, 2018 at 9:56

jacky · Accepted Answer · 2018-05-11 03:02:43Z

1

give you an example: code updated,and the checkbox will be checked in 3 seconds

var app = new Vue({
  el: '#app',
  data () {
    return {
      list: new Array(5).fill('').map((o,i)=>i),
      checked:[]
    }
  },
  created () {
    setTimeout(_=>{
      //receive your data here
      this.checked = [1,3]
    },3000)
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <label v-for="i in list"><input type="checkbox" :value="i"  v-model="checked">{{i}}</label>
  {{checked}}
</div>

edited May 11, 2018 at 3:02

answered May 10, 2018 at 10:03

jacky

1,4468 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JohnConnor · Accepted Answer · 2018-05-11 07:18:31Z

I implement like this and work but i am not sure that is clear solution;

<div class="form-group">    
   <input class="checkbox" data-role="checkbox" data-caption="Issue1"  value="1" :checked="(data.Result& 1) === 1" /> 
   <input class="checkbox" data-role="checkbox" data-caption="Issue2"  value="2" :checked="(data.Result& 2) === 2">
   <input class="checkbox" data-role="checkbox" data-caption="Issue3"  value="4" :checked="(data.Result& 4) === 4" >
   <input class="checkbox" data-role="checkbox" data-caption="Issue4"  value="8" :checked="(data.Result& 8) === 8">
  <input class="checkbox" data-role="checkbox" data-caption="Issue5"  value="16" :checked="(data.Result& 16) === 16">
</div>

And when user change checkbox,result will be change and i handle it like this;

   var sum = 0;
   $("input:checked").each(function() {      
            sum += parseInt($(this).val(), 10);
   });
   data.Result = sum;

Collectives™ on Stack Overflow

Set checkbox with Vue data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related