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. python - linux怎么在每天的凌晨2點執行一次這個log.py文件2. 關于mysql聯合查詢一對多的顯示結果問題3. 實現bing搜索工具urlAPI提交4. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)5. 數據庫 - Mysql的存儲過程真的是個坑！求助下面的存儲過程哪里錯啦，實在是找不到哪里的問題了。6. windows誤人子弟啊7. 冒昧問一下，我這php代碼哪里出錯了？？？8. 如何用筆記本上的apache做微信開發的服務器9. 我在網址中輸入localhost/abc.php顯示的是not found是為什么呢？10. mysql優化 - MySQL如何為配置表建立索引？
網公網安備