I want to be able to change the value of a checkbox by clicking on it. recentContacts are loading just fine, and specifying initial checked values in the computed function works well. The :on-press seems to change the value but does not reflect in the UI.

Please Help

Template

<nb-list>
    <nb-list-item v-for="contact in recentContacts" v-bind:key="contact.uid">
       <nb-checkbox :on-press="() => contact.checked =! contact.checked" :checked="contact.checked"></nb-checkbox>
       <nb-text>{{contact.firstName}} {{contact.lastName}}</nb-text>
    </nb-list-item>
</nb-list>

Code

export default {
   computed: {
        recentContacts() {
            return store.state.admin.userData.recentContacts.map(rc => {
                rc.checked = false;
                return rc;
            });
        }
    },
}

EDIT: I am guessing because VUEX is imutable. I've got this to work by having recentContacts inside of the data attribute instead of computed just not how I want to do things.

0 Answers