【Vue】绑定数据出错
发布于 5 个月前 作者 vxhly 929 次浏览 来自 问答
<el-form-item label="订阅指标表是否显示索引号">
  <el-switch
    v-model="config.subscriptionsOption.defaultShowIndex"
    on-color="#13ce66"
    off-color="#ff4949">
    </el-switch>
 </el-form-item>
 
 <script>
 export default {
   data () {
     return {
       config: [
	   	  'subscriptionsOption': {
		  	"defaultShowDay": 10,
			"defaultShowIndex": true,
			"tableShowOption": {
			  "statisticsOption": [ ],
			  "moreOption": [ ],
			  "otherOption": [ ]
			}
		  }
	   ]
     }
   }
 }
 </script>

image.png

有观察到能正常改变配置值,但是这个显示 undefined 是怎么回事

image.png

10 回复

你的 config 是数组而不是对象,你得用类似 config[0].subscriptionsOption 的方式去访问你的属性

那是因为在渲染之前这条属性不存在 你可以在模板中用v-if判断一下,存在了再渲染出来,就ok了。这样体验不是太好,建议加 loading遮罩,不会显的太突兀。

@maiime 倒不是页面报错,控制台报错,挺烦的

可是我将config类型改成object,也写了v-if,还是报错,,,这错误也是莫名其妙,,,,

除了config类型改成object,还有<el-form-item>外面要有<el-form>标签。

前排水果瓜子

没事解决了,给个初始值就好了

了解响应式的原理就不会出这种问题

回到顶部