0

我正在编写一个巨大的表单,并且正在尝试简化 HTML。我正在使用 Ant Design Vue。我正在尝试将其转换为:

// this works but is bloated and has repetition
<a-form-model-item prop="value1" htmlFor="value1">
  <a-input v-model="form.value1" name="value1" id="value1" />
</a-form-model-item>

进入这个

// more concise and vue-ish
<a-form-model-item v-bind="formProps('value1')">
  <a-input v-bind="inputProps('value1')" />
</a-form-model-item>

<script>
  ...
  formProps(key){return {
    prop: key,
    htmlFor: key,
  }},
  inputProps(key){return {
    "v-model": this.form[key],   <---- this doesn't work
    name: key,
    id: key,
  }},
  ...
</script>

除 v-model 外,所有道具都正确绑定。当我查看 vue-dev 工具时,v-model 显示在 $attrs 中。有没有办法动态绑定另一个 vue 指令?或者这是一个白日梦?对vue来说还是有点新意。显然,我这样做并不重要,只是想了解/了解更多信息,而我无法从文档中弄清楚。

4

0 回答 0