We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
在源码 /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输出可以看到属性确实被赋值了 但是页面表单文本框中没有对应显示内容,似乎生成出来的表单不是响应式的 请问,在实现上,确实没有进行响应式实现,还是我的操作方式不对? 如何才能通过代码响应式的修改表单的值?
__methods__: { clickTestButton1() { console.log(
, 'color:#409EFF;font-size: 15px' ) console.log('表单的Model:', this.formData) console.log('表单的ref:', this.$refs.elForm) },
this.formData.mobile = 'xxxxx'
The text was updated successfully, but these errors were encountered:
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
<input v-model="defaultValue">
<input v-model="formData.mobile">
//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]}/>
++ <render conf={scheme} on={listeners} formData={this[this.formConf.formModel]}/>
然后再测试一下,你就会发现,好使了。
Sorry, something went wrong.
No branches or pull requests
在源码 /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输出可以看到属性确实被赋值了但是页面表单文本框中没有对应显示内容,似乎生成出来的表单不是响应式的
请问,在实现上,确实没有进行响应式实现,还是我的操作方式不对?
如何才能通过代码响应式的修改表单的值?
The text was updated successfully, but these errors were encountered: