Question

我正在使用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>

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

如果存在验证错误vuelidate，则会将引导类is-invalid添加到输入，导致其变为红色。这个逻辑工作正常，但它是重复的，因为我要将id，v-model，@input和v-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 }"

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

谢谢。

Vue.js 2：动态v模型，@输入和类绑定

0 个答案: