Vue 不确定复选框绑定

Question

我正在使用 vue 进行数据绑定。我想创建一个用于访问级别控制的小部件，因此我需要允许、拒绝和不确定状态。

这个标记很好，但没有不确定状态：

<div class="row" v-for='a in context.This.Actions'>
    <div class="col-96">
        <input class="custom-control-input access-checkbox" v-bind:id="'chk_'+a.Name" v-bind:value="a.Id" v-model="context.This.RoleActions" indeterminate="true" type="checkbox" />
        <label class="pointer" v-bind:for="'chk_'+a.Name">{{ a.Name }}</label>
    </div>
</div>

变量是：

context.This.Actions = [
    { "Id": "id_1",
      "Name": "AAA"
    },
    { "Id": "id_2",
      "Name": "BBB"
    },
    { "Id": "id_3",
      "Name": "CCC"
    }
]

context.This.RoleActions = [ "id_1", "id_2" ]

我想要这样的改变：

context.This.RoleActions = [ {"id_1":true}, {"id_2":false} ]

我希望得到以下结果：

• 第一个复选框：选中

• 第二个复选框：未选中

• 另一种：不确定

Answer 1

Indeterminate 是复选框上的 DOM 属性，这意味着将其放入标记中不会产生任何效果，需要以编程方式应用。

即使这样做之后，请记住复选框的状态仍然是选中或未选中。在处理表单时要记住这一点很重要。区别只是视觉上的。（来源）

考虑到这些注意事项，在 Vue 2 中，您可以向复选框添加不确定属性，如下所示：

<input type="checkbox" indeterminate.prop="true">

或绑定到组件中的动态值：

<input type="checkbox" :indeterminate.prop="dataProperty">

我会建议重构考虑到这一点。