Computed Methods not updating on change checkbox value in vue js

Question

I have made a codepen demonstrating a problem I'm having with a checkbox not working. On changes, the value of clipsData does not get updated.

https://codepen.io/bozlurrahman/pen/BeZVzR?editors=1010


<div id="video-clips-wrap">
    <div>{{clipsData}}</div>

    <li v-for="(clip, index) in clips" v-bind:key="index">

        <div class="vl-subsource-container">

            <input type="checkbox" value="issubsource" v-model="clip.subsourcesettings" v-on:change="viewSubSource(index)"><label>Not Update on change: {{clip.issubsource}}</label>

            <div v-if="clip.subsourcesettings.length">
                <label>Dynamic Contents</label>
            </div>

        </div>
        <div class="meditations-options">
            <label>Meditations: </label>
            <input type="checkbox" value="motivation" v-model="clip.meditations"><label>1. Motivation</label>
            <input type="checkbox" value="gratitude" v-model="clip.meditations"><label>2. Gratitude</label>

        </div>

    </li>
</div>

var video_clip_data_var = "[{\"meditations\":[\"motivation\",\"gratitude\"]}]";
var VideoClip = new Vue({
    el: '#video-clips-wrap',
    data: {
        clips: [],
        loading: false,
    },
    created: function () {

        this.clips = JSON.parse(video_clip_data_var);

        for (var i = 0; i < this.clips.length; i++) {

            // if( typeof this.clips[i].meditations == "string" )
            //  this.clips[i].meditations = this.clips[i].meditations.split(',');

            this.clips[i].subsourcesettings = "issubsource".split(',');
            this.clips[i].subsources = [];
        }

    },
    methods: {
        viewSubSource: function (index) {
            console.log(`this.clips[`+index+`].subsourcesettings`,this.clips[index].subsourcesettings);
            console.log(`this.clips`,this.clips);
            // this.clipsData = JSON.stringify(this.clips);
        },
    },
    computed: {
        clipsData: function () {
            return JSON.stringify(this.clips);
        },
    }
});

Is there any one who can help me to fix this problem? When clicking on the check box, the hidden content should show directly. Thanks.

There is no {{clip.issubsource}} inside 'clip' object instead issubsource is a 'subsourcesettings' Array's item. Is that may a problem? — Sajib Khan
– Sajib Khan, Commented May 18, 2019 at 7:23

tony19 · Accepted Answer · 2022-07-16 00:09:20Z

2

Replace that

this.clips[i].subsourcesettings = "issubsource".split(',');
this.clips[i].subsources = [];

to

Vue.set(this.clips[i], 'subsourcesettings', "issubsource".split(','))
Vue.set(this.clips[i], 'subsources', [])

Here you can find more details about your problem.

edited Jul 16, 2022 at 0:09

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 18, 2019 at 13:48

NaN

1,98515 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Computed Methods not updating on change checkbox value in vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related