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