在使用Vue时,动态循环绑定数组里面的对象导致,报错代码:
<ul>
<li v-for="(obj) in ar">
<input v-model="obj.name?text[obj.name][i][obj.field]:text[obj.field]"
:disabled="obj.disabled"/>
</li>
</ul>
<script>
var a = new Vue({
el:"#t",
data:{
i:0,
ar:[{
field:"a",
disabled:true
}, {
name:"b",
field:"c"
}],
text:{
a:"",
b:[{
c:""
}]
}
}
})
</script>
原因:因为业务需要判断,然后v-model里面加了个三目运算导致,加三目运算能取到对应的值,但是不能绑定到对应的字段,会报错
解决:分开判断就行,v-model里面不写任何运算
<template v-if="obj.name">
<input v-model="text[obj.name][i][obj.field]" :disabled="obj.disabled"/>
</template>
<template v-else>
<input v-model="text[obj.field]" :disabled="obj.disabled"/>
</template>
记录下