如何在Vue绑定中使用三元运算符

Question

<label class="switch"> 
<input type="checkbox"  v-on:change="updateRequiredData(list.input_permission_id,selected, selected == 'Applicant' ? list.status : selected =='Guaranter' ? list.guaranter_required : selected ='Reference' ? list.guaranter_required)"  v-bind:checked="list.status =='1'" >    
<span class="slider round"></span>
</label>

我必须根据选择条件来更新复选框的值，例如如果我选择申请人，它将显示申请人复选框，当我选择“申请人”时，该功能应更新list.update 如果我选择guaranter，则应该使用list.guaranter_required并更新

Answer 1

您的模板中似乎有太多事情要做，这使得在逻辑中更容易出错。同样，随着要检查的案例数量的增加，使用三元运算符很快变得非常笨拙。尝试这样的事情：

<label class="switch"> 
    <input type="checkbox"
        v-on:change="updateRequiredData(list.input_permission_id, selected, this.selectionResult)"
        v-bind:checked="list.status =='1'"
    >    
    <span class="slider round"></span>
</label>

// In your computed properties or methods
// Which one will depend on what scope selected and list are available at in your component)
selectionResult: function() {
    switch (selected) {
        case 'Applicant': return list.status;
        case 'Guaranter':
        case 'Reference':
            return list.guaranter_required;
    }
}