Question

我有Vue数据;

就像app。$ data.Result这个结果来自服务器，它只是值（0-31）;

我想安排我的复选框依赖于此值;

这是复选框;

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

我可以通过使用Id的

来传输数据来设置它们

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

但是这种方式太长了，因为app。$ data.Result可以像“3”，我必须检查Issue1和Issue2当用户点击任何复选框时，我需要添加/子应用。$ data.Result所以怎么能我用Vue解决了这个问题。

Answer 1

举个例子：代码已更新，复选框将在3秒后检查

＆＃13;

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

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/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>

＆＃13;

Answer 2

我实施这样的工作，但我不确定这是明确的解决方案;

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

当用户更改复选框时，结果将会更改，我会像这样处理;

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

使用Vue数据设置复选框

2 个答案: