2

我正在构建一个表单，vue并且bootstrap-vue在vuelidate输入上使用此代码，一切都按预期工作：

<b-form-group id="company-group"
          label="Your company:"
          label-for="company">
<b-form-input id="company"
              type="text"
              v-model="form.company"
              @input="$v.form.company.$touch()"
              v-bind:class="{ 'is-invalid': $v.form.company.$error }"
              >
</b-form-input>
<b-form-invalid-feedback>
    Invalid company name!
</b-form-invalid-feedback>

想法是公司名称的用户值存储在form.company并使用验证vuelidate。

如果存在验证错误vuelidate，则将引导类添加is-invalid到输入中，使其变为红色。这个逻辑工作正常，但是它是重复的，因为我必须设置id,v-model和基本上相同的东西：@inputv-bind:class

id="company"
v-model="form.company"
@input="$v.form.company.$touch()"
v-bind:class="{ 'is-invalid': $v.form.company.$error }"

有没有办法v-model，@input并v-bind:class使用这样的值id：

id="company"
v-model="form[this.id]"
@input="$v.form.[this.id].$touch()"
v-bind:class="{ 'is-invalid': $v.form.[this.id].$error }"

这将使表单构建变得更加容易，但是正如我预期的那样它不起作用。

谢谢你。

4

0 回答 0