javascript - 如何在 Vue 中 v-bind 另一个指令（例如 v-model）？

Question

我正在编写一个巨大的表单，并且正在尝试简化 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来说还是有点新意。显然，我这样做并不重要，只是想了解/了解更多信息，而我无法从文档中弄清楚。

标签： javascriptvue.jsant-design-vue