vue-formulate - 我可以通过 Vue Formulate 的模式 API 传递元数据而不影响输入属性吗?
问题描述
目标:
- 从 JSON/CMS 生成表单字段
- 在 JSON 中有一个参数,允许两个字段在一行上彼此相邻
到目前为止的解决方案:
我正在使用 Vue Formulate 的模式 API 来生成字段。在 Vue Formulate 的选项中,我可以outer
根据context
.
classes: {
outer(context, classes) {
if (context.attrs.colspan === 1) {
return classes.concat('col-span-1')
}
return classes.concat('col-span-2')
},
我正在使用 Tailwind,它不需要类名连接,并且实际上希望默认为col-span-2
,因此如果您倾向于复制它,您的逻辑可能会有所不同。
将一些类应用于FormulateForm
,这非常有效。由于 CSS 网格,不需要额外的包装行:
<FormulateForm
v-model="values"
class="sm:grid sm:grid-cols-2 sm:gap-2"
:schema="schema"
/>
架构现在看起来像这样:
[
{
type: 'text',
name: 'first_name',
label: 'First name',
validation: 'required',
required: true,
colspan: 1,
},
问题/问题
Vue Formulate 的模式 API 将所有定义的属性(除了一些保留名称)传递给input
元素。就我而言,这导致:
<div
data-classification="text"
data-type="text"
class="formulate-input col-span-1"
data-has-errors="true"
>
<div class="formulate-input-wrapper">
<label
for="formulate-global-1"
class="formulate-input-label formulate-input-label--before"
>
First name
</label>
<div
data-type="text"
class="formulate-input-element formulate-input-element--text"
>
<input
type="text"
required="required"
colspan="1" <--------------- hmm…
id="formulate-global-1"
name="first_name"
>
</div>
</div>
</div>
我认识到我可以命名我的属性data-colspan
,这样我就不会在td
上放置属性input
,但我认为colspan
我不想将其应用于模板的元数据。有没有办法防止它被应用到——input
也许是模式 API 中的一个保留字,它允许通过访问元数据对象context
而不被应用到v-bind="$attrs"
?
解决方案
vue-formulate 团队帮助我解决了这个问题。非常感谢。非常喜欢。
有一种方法可以防止它登陆输入,那就是使用outer-class
模式中的保留属性:
[
{
type: 'text',
name: 'first_name',
label: 'First name',
validation: 'required',
required: true,
'outer-class': ['col-span-1'],
},
这意味着我根本不需要这样做:
classes: {
outer(context, classes) {
if (context.attrs.colspan === 1) {
return classes.concat('col-span-1')
}
return classes.concat('col-span-2')
},
vue-formulate 支持通过 props 替换或连接类。我设法忽略了它,因为我没有认识到您传递给模式 API 的所有内容最终都与应用该名称的道具相同。
类也可以应用于组件的其他几个部分——不仅仅是outer
/container。更多信息在这里:
https://vueformulate.com/guide/theming/customizing-classes/#sharing-classes-with-props
推荐阅读
- java - 创建二维字符串数组
- powershell - 如何从 PowerShell 中的父窗口获取后台任务状态
- node.js - 如何在打字稿中进行模块解析以输出节点?
- reactjs - React 应用程序无法访问 Apache 上的 NodeJs 后端
- python - 错误:目录迁移已经存在,并且从烧瓶数据库初始化中不为空
- docker - 通过 ssh 在远程机器上运行 docker 命令
- java - AWS JAVA SDK 错误“存储桶位于此区域:us-east-1。请使用此区域来”
- python - 在熊猫数据框中格式化字符串
- java - 为什么 WebClient 在这个 web-flux 应用程序中被阻塞?
- swift - 跳过 NSData 的第一个字节