form-create如何获取handle传过来的值在接口中使用
时间: 2024-03-27 14:37:02 浏览: 19
form-create 是一个基于 Vue.js 的表单生成器,它本身并不提供直接获取 handle 传过来的值的方法。
一般情况下,如果要将表单中的值提交到接口中,可以通过在表单元素上使用 `v-model` 指令来实现双向绑定。例如:
```html
<template>
<div>
<fc :rule="rule" :option="option"></fc>
<button @click="submit">提交</button>
</div>
</template>
<script>
export default {
data () {
return {
formData: {}
}
},
methods: {
submit() {
// 将 formData 提交到接口中
}
},
computed: {
rule () {
return [
{
type: 'input',
field: 'name',
title: '姓名',
value: this.formData.name
},
{
type: 'input',
field: 'age',
title: '年龄',
value: this.formData.age
}
]
},
option () {
return {
inline: true
}
}
}
}
</script>
```
在上面的代码中,我们通过绑定 `v-model` 指令将表单元素的值与 `formData` 对象进行双向绑定,然后在提交按钮的点击事件中,将 `formData` 对象提交到接口中即可。
当然,如果你需要获取 handle 传过来的值,并在表单元素的选项中使用,可以在 `computed` 中定义一个计算属性来获取 handle 传过来的值,例如:
```html
<template>
<div>
<fc :rule="rule" :option="option"></fc>
</div>
</template>
<script>
export default {
props: {
handleValue: {
type: Object,
required: true
}
},
computed: {
rule () {
return [
{
type: 'input',
field: 'name',
title: '姓名',
value: this.handleValue.name
},
{
type: 'input',
field: 'age',
title: '年龄',
value: this.handleValue.age
}
]
},
option () {
return {
inline: true
}
}
}
}
</script>
```
在上面的代码中,我们通过 props 接收 handle 传过来的值,并在 `computed` 中定义了一个计算属性来使用这些值。然后,我们将这个计算属性绑定到表单元素的选项中,以便在表单中使用这些值。