Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

使用parser解析json生成的表单中,如何在on事件中,响应式的修改表单的值 #188

Open
czcz1024 opened this issue Mar 17, 2023 · 1 comment

Comments

@czcz1024
Copy link

在源码 /components/parser/example/index.vue中的例子里,有
__methods__: { clickTestButton1() { console.log( %c【测试按钮1】点击事件里可以访问当前表单:
1) formModel='formData', 所以this.formData可以拿到当前表单的model
2) formRef='elForm', 所以this.$refs.elForm可以拿到当前表单的ref(vue组件)
, 'color:#409EFF;font-size: 15px' ) console.log('表单的Model:', this.formData) console.log('表单的ref:', this.$refs.elForm) },
这样一段示例代码
我在这个方法中,通过使用 this.formData.mobile = 'xxxxx'对数据进行修改,通过console.log输出可以看到属性确实被赋值了
但是页面表单文本框中没有对应显示内容,似乎生成出来的表单不是响应式的
请问,在实现上,确实没有进行响应式实现,还是我的操作方式不对?
如何才能通过代码响应式的修改表单的值?

@609067409
Copy link

609067409 commented Mar 22, 2023

this.formData是有双向绑定的,你看this对象上formData有劫持到get set方法就可以排除
没有出现响应式的原因是因为render.js-18行代码
dataObject.props.value = defaultValue
其实就是相当于 <input v-model="defaultValue"> 正常来说应该是<input v-model="formData.mobile"> 才对,作者这里这样写是为了让默认值能出现在input上,但是这样也导致了你直接修改formData它无法回显的问题。
所以要修改这个问题也很简单,在兼容之前的代码基础上:
1将formData传入render.js

//render.js
 props: {
    conf: {
      type: Object,
      required: true
    },
++    formData: {
++     type: Object
++ }
  }

2.将<input v-model="defaultValue"> 改为<input v-model="formData.mobile"> 并且兼容之前的代码

// 注意这里要加一个参数获取vModel
//render.js-53行:
++vModel.call(this, dataObject, confClone.__config__.defaultValue, confClone)
//render.js-17行:
++function vModel(dataObject, defaultValue, conf) {
++   dataObject.props.value = this.formData ? this.formData[conf.__vModel__] : defaultValue
       dataObject.on.input = val => {
    this.$emit('input', val)
  }
}

3.在Parse.vue-28将formData传入给render.js使用
Parse.vue-28
++ <render conf={scheme} on={listeners} formData={this[this.formConf.formModel]}/>

然后再测试一下,你就会发现,好使了。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants