vuejs 表单
语言形式 (vue-form)
Not Only Form State Management for VueJS.
不仅为VueJS形成状态管理。
安装 (Installation)
npm i @detools/vue-form
用法 (Usage)
import { mapActions } from 'vuex'
import Form, { Input } from '@detools/vue-form'
export default {
data() {
return {
formValues: {},
}
},
methods: {
...mapActions('cart', ['checkout']),
handleSubmit(values) {
return this.checkout(values)
},
},
render() {
return (
<div>
<h1>Basic Form</h1>
<div class="wrapper">
<div class="form">
<Form cancel submit handleSubmit={this.handleSubmit} v-model={this.formValues}>
<Input formItem label name="username" />
</Form>
</div>
<div class="values">
<strong>Form Values</strong>
<br />
<br />
<div>{JSON.stringify(this.formValues, null, 2)}</div>
</div>
</div>
</div>
)
},
}
更多例子 (More Examples)
See source in example/src folder. See demo at https://detools-vue-form.netlify.com
请参见example / src文件夹中的源代码。 请参阅https://detools-vue-form.netlify.com上的演示
可用的连接组件 (Available Connected Components)
翻译自: https://vuejsexamples.com/form-state-management-for-vuejs/
vuejs 表单