Vue.js：如果语句为true，则选中复选框

Question

我的旧车把视图中有以下复选框：

<div class="form-group">
    <input type='checkbox' name='xmlOnline[]' value="stepstone" class='' {{#if (ifIn 'stepstone' job.xmlOnline)}} checked="checked" {{/if}}> Stepstone
    <input type='checkbox' name='xmlOnline[]' value="karriere" class='' {{#if (ifIn 'karriere' job.xmlOnline)}} checked="checked" {{/if}}> Karriere
</div>

因此，如果job.xmlOnline具有“ stepstone”作为值，则应将其标记为已选中。“ karriere”也是如此。

现在，我正在尝试以POST形式在Vue.js中实现相同的目的。这就是对象“作业”的样子：http : //t2w-api.herokuapp.com/jobs/590c20d42b1c4300046bb1b9

因此它可以包含“ karriere”，“ stepstone”，两者或“ null”。

到目前为止，我在组件中得到了什么：

<div v-for="(xml, index) in job.xmlOnline">
    <input type="checkbox" :checked="xml == 'stepstone'"> Stepstone {{ index }}
    <input type="checkbox" :checked="xml == 'karriere'"> Karriere {{ index }}
</div>

复选框被选中，但是我重复了它们。我也不知道如何添加v模型。

这是我组件的来源。做了一些与“资格” /“责任”类似的事情：https : //github.com/markusdanek/t2w-vue/blob/mdanek/2-auth-system/src/components/backend/JobEdit.vue

Answer 1

可能的解决方案

<input type="checkbox" 
       :checked="job.xmlOnline && job.xmlOnline.includes('stepstone')"
       @change="onChange('stepstone', $event)"> Stepstone
<input type="checkbox" 
       :checked="job.xmlOnline && job.xmlOnline.includes('karriere')"
       @change="onChange('karriere', $event)"> Karriere

还有onChange方法

methods:{
  onChange(value, $event){
    if (!this.job.xmlOnline)
      this.job.xmlOnline = []

    const index = this.job.xmlOnline.findIndex(v => v == value) 
    const checked = $event.target.checked

    if (checked && index < 0)
      this.job.xmlOnline.push(value)
    if (!checked && index >= 0)
      this.job.xmlOnline.splice(index, 1)
  }
}

实例。