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> <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所有数据呢？求指教多谢
问题解答
回答1：你可以试试： https://jsfiddle.net/milu2003...我的例子可以通过。
你的循环有问题把。
<p v-for='n in insurant.length'><input v-model='insurant[n].insurantName'> </p>
你这个循环写法很奇怪。我特意去vue官网看了例子，发现不是这样写的。官网的例子是这样的：
<li v-for='item in items'> {{ item.message }} </li>
https://cn.vuejs.org/v2/guide...
你这里的n输出1、2.那么insurant[n]出错是必然的。
回答2：<!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>
相关文章：
1. redis sentinel怎么跑守护进程以及日志记录位置的？2. django - Nginx uwsgi 进程问题3. javascript - sublime快键键问题4. 前端 - 这段代码一直生效不了，查半天因为 top: 0px; 分号后一个隐藏的东西，也不是占位符...删了就可以生效，这是什么情况。。5. javascript - 爱加密的HTML5应用加固服务是什么原理？6. 微信小程序支持跳转到外部链接网页吗7. javascript - 求助关于js正则问题8. 关于纯用css写导航鼠标移入事件的问题？9. 百度地图api - Android百度地图SDK，MapView上层按钮可见却不可触，怎么解决？10. 求救一下，用新版的phpstudy，数据库过段时间会消失是什么情况？
网公网安备