[Vuejs]-Vue.js list binding doesn't work

by

0👍

✅

mainObjects reference is not changed. You need to deep copy to make Vue reactive

<div id="app">
    <div class="areaInfo " v-for="(area, index) in mainObjects" v-on:click="klik(index)">
        <div class="trDiv areaData">
            <div class="tdDiv" v-for="(prop, key) in area" v-if="key != 'ChildData'">
                {{key}}
                <template v-if="key.includes('Start') || key.includes('End') ">
                    {{ ConvertJsonDateString(prop) }}
                </template>
                <template v-else-if="!key.includes('Id')">
                    {{ prop }}
                </template>
            </div>
            <div class="tdDiv" > {{area.childSeen}}</div>
        </div>
    </div>
</div>

var app = new Vue({
    el: "#app",
    data () {
      return {
        mainObjects
      }
    },
    methods: {
        klik: function (index) {
            const mainObjects = JSON.parse(JSON.stringify(mainObjects)) // deep copy
            const region = mainObjects[index]
            console.log(region.childSeen)
            if (region.childSeen == false) {
                console.log('wasFalse');
                region.childSeen = true;
            }
            region.childSeen = false;
            this.mainObjects = mainObjects // assign again
        }

    },
});

Leave a comment