Vue.js：如果语句为真，则设置复选框检查答案

【问题标题】：Vue.js: Set checkboxes checked if statement is trueVue.js：如果语句为真，则设置复选框检查
【发布时间】：2017-10-14 10:23:01
【问题描述】：

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

<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 表单实现相同的功能。这就是对象“job”的样子：http://t2w-api.herokuapp.com/jobs/590c20d42b1c4300046bb1b9

所以它可以包含“karriere”、“stepstone”、both 或“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

【问题讨论】：

标签： checkbox model vue.js vuejs2

【解决方案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)
  }
}

Example.

【讨论】：

谢谢！完美工作:) 你能帮我在添加新工作时如何发布此复选框吗？ jsfiddle.net/ush3mps5
我也忘记了，也有可能，job.xmlOnline 也可以不包含任何内容。 ://
@mrks 当你什么都不说时，你的意思是它是空的，或者它是一个空数组。如果它是一个空数组，它仍然会像答案一样工作。至于如何发布它，这取决于您的服务器端。
抱歉不够清楚。我的意思是它也可以是“null”，就像在这个例子中一样：57c52e875028100300236b6b
完美！非常感谢！ :-) 在发布新的“工作”时，关于我的第一条评论（如何使用 v-model）有什么最后的建议吗？

【解决方案2】：

你可以把它绑定到一个字面上

:true-value="1"

它会按预期工作。

【讨论】：

【解决方案3】：

<b-form-checkbox class="col-sm-1 small" :value="1" switch v-model="user.nameb" :state="Boolean(user.nameb)" name="checkbox-validation">
    <b-form-invalid-feedback v-show="!Boolean(user.nameb)" :state="Boolean(user.nameb)">Not Verified</b-form-invalid-feedback>
    <b-form-valid-feedback v-show="Boolean(user.nameb)" :state="Boolean(user.nameb)">Verified</b-form-valid-feedback>
</b-form-checkbox>

【讨论】：

【解决方案4】：

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

【讨论】：