Vue.js: 如果语句为真，则设置复选框为选中状态

Question

Vue.js: 如果语句为真，则设置复选框为选中状态

9

我曾在我的旧handlebar视图中使用以下复选框：

<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"、两者或"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。

这是我的组件源码。与 "qualifications" / "responsibility" 相似的用法：https://github.com/markusdanek/t2w-vue/blob/mdanek/2-auth-system/src/components/backend/JobEdit.vue

- mrks

4个回答

3

<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

2

你可以将它绑定到文字字面量中，如下所示：

:true-value="1"

它将按预期工作。

- Mahesh Yadav

1

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

- chanaka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bert · Accepted Answer

一个可能的解决方案。

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

示例。