Asp.net Vue.js列表绑定不'；行不通

对不起我的英语。 数据绑定不起作用。 所有数据都正确地序列化和显示，但如果我尝试更改某些值，则什么也不会发生。 Klik（）方法工作正常，条件工作正常。 请帮忙

HTML代码

<div id="app">
    <div class="areaInfo " v-for="area in mainObjects" v-on:click="klik(area)">
        <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>

{{key}}
{{ConvertJsonDateString（prop）}
{{prop}}
{{area.childSeen}

脚本：

var mainObjects = @(Html.Raw(result.Content));

for (var i = 0; i < mainObjects.length; i++) {
    mainObjects[i].childSeen = false;
    for (var j = 0; j < mainObjects[i].ChildData.length; j++) {
        mainObjects[i].ChildData[j].childSeen = false;
    }
}

 console.log(mainObjects);

var app = new Vue({
    el: "#app",
    data: mainObjects,
    methods: {
        klik: function (region) {
            console.log(region.childSeen)
            if (region.childSeen == false) {
                console.log('wasFalse');
                return region.childSeen = true;
            }
            return region.childSeen = false;
        }

    },
});

var mainObjects=@（Html.Raw（result.Content））；
对于（变量i=0；i

模型示例：

public class Test 
{
   public string FirstName {get;set;}
   public string LastName {get;set;}
   public List<Rebenok> ChildData {get;set;}
}

public class Rebenok
{
   public string FirstName {get;set;}
   public string LastName {get;set;}
   public List<Diagnosis> Diagnoses {get;set;}
}

public class Diagnosis
{
   public string Name {get;set;}
   public string Description {get;set;}
}

公共类测试
{
公共字符串名{get；set；}
公共字符串LastName{get；set；}
公共列表子数据{get；set；}
}
公共类Rebenok
{
公共字符串名{get；set；}
公共字符串LastName{get；set；}
公共列表诊断{get；set；}
}
公共类诊断
{
公共字符串名称{get；set；}
公共字符串说明{get；set；}
}

mainObjects

参考未更改。您需要进行深度复制以使Vue成为被动的

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

    },
});

{{key}}
{{ConvertJsonDateString（prop）}
{{prop}}
{{area.childSeen}
var app=新的Vue({
el:“应用程序”，
数据（）{
返回{
主要对象
}
},
方法：{
klik：函数（索引）{
const mainObjects=JSON.parse（JSON.stringify（mainObjects））//深度复制
常量区域=主要对象[索引]
console.log（region.childSeen）
if（region.childSeen==false）{
console.log（'wasflse'）；
region.childSeen=true；
}
region.childSeen=false；
this.mainObjects=mainObjects//重新分配
}
},
});

mainObjects

参考未更改。您需要使用deepcopy使Vue成为被动的