我可以通过 Vue Formulate 的模式 API 传递元数据而不影响输入属性吗？

Question

目标：

从 JSON/CMS
在 JSON 中有一个参数，允许两个字段在一行上彼此相邻

目前解决方案：

我正在使用 Vue Formulate 的架构 API 来生成字段。在 Vue Formulate 的选项中，我可以根据 context.

中的参数有条件地将 class 添加到 outer 容器

classes: {
  outer(context, classes) {
    if (context.attrs.colspan === 1) {
      return classes.concat('col-span-1')
    }
    return classes.concat('col-span-2')
  },

我正在使用 Tailwind，它不需要 class 名称连接，实际上想要默认值是 col-span-2，所以如果你倾向于复制这个，你的逻辑可能会有所不同。

将一些 classes 应用到 FormulateForm，效果非常好。由于 CSS grid:

，不需要额外的包装行

<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,
  },

problem/question

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"?

Answer 1

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/容器。更多信息在这里：

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

我可以通过 Vue Formulate 的模式 API 传递元数据而不影响输入属性吗？

Can I pass metadata through Vue Formulate's schema API without affecting input attributes?

vue-formulate

目标：

目前解决方案：

problem/question