Vue.js：如果语句为真，则设置复选框已选中

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”也是如此。

现在，我正尝试在 Vue.js 中为我的 POST 表单实现相同的功能。这就是对象“工作”的样子： 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-model。

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

原文由 mrks 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

例子。

原文由 Bert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<input type="checkbox" class="form-check-input" :value="party.status"
@change="updateStatus"
 :checked="party.status == 1 ? true: false"
 id="status" name="status"/>

并在组件方法中

updateStatus(e){
            if(e.target.checked){
                store.commit('updateStatus', 1);
            } else {
                store.commit('updateStatus', 0);
            }
    },

原文由 Muhammad asif 发布，翻译遵循 CC BY-SA 4.0 许可协议