nmxiaowei / avue

Avue.js2.0是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易
https://avuejs.com
MIT License
2.22k stars 488 forks source link

子表单使用深层结构数据发生错误 #632

Closed zhuwenbing closed 1 year ago

zhuwenbing commented 1 year ago

错误描述 原因是项目里有一个接口数据是深层结构的,刚开始以为是数据问题,后来使用Avue官网例子中的子表单代码改为深层结构后出现相同错误。

异常日志

error.js:13 >>>>>> 错误信息 >>>>>>
error.js:14 callback for watcher "form.dynamic"
error.js:16 >>>>>> Vue 实例 >>>>>>
error.js:17 VueComponent {_uid: 274, _isVue: true, $options: {…}, _renderProxy: Proxy(VueComponent), _self: VueComponent, …}
error.js:19 >>>>>> Error >>>>>>
error.js:20 SyntaxError: Unexpected identifier 'Object'
    at setAsVal (index.js:7:5032)
    at VueComponent.<anonymous> (index.js:9:157649)
    at invokeWithErrorHandling (vue.runtime.esm.js:1863:1)
    at Watcher.run (vue.runtime.esm.js:4584:1)
    at flushSchedulerQueue (vue.runtime.esm.js:4326:1)
    at Array.eval (vue.runtime.esm.js:1989:1)
    at flushCallbacks (vue.runtime.esm.js:1915:1)

版本号 Avue.js v2.10.11

异常截图和代码 以下代码为官网例子代码中的数据修改为深层结构而来

<el-button @click="addAll" size="small" type="primary">添加10条子表单数据</el-button>
</br></br>
<avue-form :option="option" v-model="form">
 <template slot-scope="{row}" slot="input">
   <el-tag>序号:{{row.$index}}-数据:{{row.input}}</el-tag>
  </template>
</avue-form>
<script>
export default {
  data() {
      return {
        form: {
          deep: {
            dynamic: [{
              input: 1,
              select: 1
            }, {
              input: 2,
              select: 2
            }]
          }
        },
        option: {
          column: [
          {
            label: '子表单',
            prop: 'dynamic',
            bind: 'deep.dynamic',
            type: 'dynamic',
            span:24,
            children: {
              align: 'center',
              headerAlign: 'center',
              rowAdd:(done)=>{
                this.$message.success('新增回调');
                  done({
                    input:'默认值'
                  });
              },
              rowDel:(row,done)=>{
                this.$message.success('删除回调'+JSON.stringify(row));
                done();
              },
              column: [{
                width: 200,
                label: '输入框',
                prop: "input"
              }, {
                label: '选择框',
                prop: "select",
                type: 'select',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }]
            }
          },

          ]
        }
      }
  },
  methods:{
    addAll(){
      for(let i=0;i<10;i++){
        this.obj.dynamic.push({
          input: 1,
          select: 1
        })
      }
    }
  }
}
</script>
nmxiaowei commented 1 year ago

子表单不支持bind深结构