javascript - vue如何绑定动态属性为根级响应？-PHP中文网问答

用户需要填写多个被保险人的信息，但是被保险人数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>
    <p v-for="n in insurant.length">
        <input v-model="insurant[n].insurantName">
    </p>
</template>
data(){
    return {
        insurant: []
    }
}

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

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p id="app"> <input type="number" v-model="count" /> <p v-for="i in count"> <com1></com1> </p> <button @click="submit">submit</button> </p> <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>