Question

我制作了一个Codepen，以显示我无法使用复选框的问题。更改时，clipsData的值不会更新。

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

有没有人可以帮助我解决此问题？单击复选框时，隐藏的内容应直接显示。谢谢。

Answer 1

替换

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

到

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

Here，您可以找到有关您的问题的更多详细信息。

计算的方法未在vue js中更改更新复选框的值

1 个答案: