CODEWITHSUNDEEP
vue.js
Ashutosh Roy
Ashutosh Roy

Reputation: 81

How to use ternary operator in Vue binding

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

I have to update value of check-box according to select condition like if i select applicant it shows applicant check box, when i select 'Applicant' the function should update list.update If i select guaranter it should take list.guaranter_required and update

Upvotes: 0

Views: 4695

Answers (1)

Nico
Nico

Reputation: 367

You seem to have way too much going on in your template, which makes it easier to make mistakes in your logic. Also, with the number of cases you're checking, using the ternary operator quickly becomes very unwieldy. Try something like this instead:

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

Upvotes: 1

Related Questions