我可以通过 Vue Formulate 的模式 API 传递元数据而不影响输入属性吗？ 目标：目前的解决方案：问题/疑问

如何解决我可以通过 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 的所有内容最终都与应用该名称的 prop 相同。

类也可以应用于组件的其他几个部分——不仅仅是 outer/container。更多信息在这里：

https://vueformulate.com/guide/theming/customizing-classes/#changing-classes-with-props