数据格式是数组包对象,对象里面再包数组,数组再包对象,如下:
外层for遍历出editInfo里面所有的属性,内层for遍历Options。
最终实现样子
两个问题:
1.点加减按钮的时候往options里push/pop一条数据,代码执行了,options也变了,但是页面没重新渲染
2.v-model绑定options里面的value,编辑输入框打不进去字,一旦修改了options同级的内容(也就是第一层for)后编辑的文字就显示出来了,也是页面没渲染的问题,vue没有检测到改变
问题分析:
js直接动态修改数组[]或对象{}里面的属性/值时,vue不会检测到改变,页面不会重新渲染。
可以使用Vue.set(数组/对象,下标/属性,值);
或this.$set(数组/对象,下标/属性,值);
这次不同,这次是用的v-model,而且用的是数组自带的一些vue能检测的方法,
解决问题:
1.push/pop完了执行this.$forceUpdate();方法强制更新
2.使用v-model的input上加@input="forceUpdate();"