javascript - 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所有数据呢？求指教多谢

解决方案

你可以试试： https://jsfiddle.net/milu2003...
我的例子可以通过。

你的循环有问题把。

<div v-for="n in insurant.length">
        <input v-model="insurant[n].insurantName">
    </div>

你这个循环写法很奇怪。我特意去vue官网看了例子，发现不是这样写的。
官网的例子是这样的：

<li v-for="item in items">
    {{ item.message }}
  </li>

https://cn.vuejs.org/v2/guide...

你这里的n输出1、2.那么insurant[n]出错是必然的。

这篇关于javascript - vue如何绑定动态属性为根级响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！