vue如何绑定动态属性为根级响应？

用户需要填写多个被保险人的信息，但是被保险人数n是从上一页传过来的。由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性。但被保人list长度是动态的，那么该如何绑定所有的被保人信息相关数据。例如

n=1时：

insurant: [
    {
        "insurantName": null,
                "mobileTelephone": null,
                "certificateNumber": null,
                "sex": null,
                "birth": null
    }
]

n=2时：

insurant: [
    {
        "insurantName": null,
         "mobileTelephone": null,
         "certificateNumber": null,
         "sex": null,
         "birth": null
    },
    {
        "insurantName": null,
         "mobileTelephone": null,
         "certificateNumber": null,
         "sex": null,
         "birth": null
    }
]

初始化时

<template>
    <div v-for="n in insurant.length">
        <input v-model="insurant[n].insurantName">
    </div>
</template>
data(){
    return {
        insurant: []
    }
}

当被保人数n是动态时，v-model="insurant[n].insurantName"会报错。这种情况该如何在template里绑定被保人insurant所有数据呢？求指教多谢

阅读 5.2k

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="app"> <input type="number" v-model="count" /> <div v-for="i in count"> <com1></com1> </div> <button @click="submit">submit</button> </div> <script src="http://cdn.bootcss.com/vue/2.1.0/vue.min.js"></script> <script> Vue.component('com1', { template: '<input type="text" v-model="name" />', data() { return { name: null } } }) new Vue({ el: '#app', data() { return { count: 3 } }, methods: { submit() { console.log(this.$children.map(t => t.name)) } } }) </script> </body> </html>

vue如何绑定动态属性为根级响应？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？