Vuetify嵌套表单元素不适用于$ refs

时间:2019-03-18 02:49:06

标签: vue.js vuetify.js

我无法获取自己的表单以使用我在表单中定义的引用。我的结构看起来像这样:

<v-form v-model="myModel" ref="form">
  <v-container grid-list-md>
    <v-layout wrap>
      <v-flex xs4>
        <v-combobox
            v-model="comboModel"
            item-text="name"
            return-object
            :items="itemArray"
            label="combo model*"
            required
            ref="form"
          ></v-combobox>
      </v-flex>
    </v-layout>
  </v-container>
  <v-container grid-list-md>
    <v-layout wrap>
      <v-flex xs4>
        <v-combobox
            v-model="comboModel2"
            item-text="name"
            return-object
            :items="itemArray"
            label="combo model*"
            required
            ref="form"
          ></v-combobox>
      </v-flex>
    </v-layout>
  </v-container>
</v-form>

我还没有找到有关此问题的任何文档,但是看来我在表单中的结构正在制作中,因此我无法使用参考。我收到此错误:

"TypeError: this.$refs.form.reset is not a function"

我只是想知道是否有任何相关文档,或者该结构导致此操作失败。我尝试过将输入元素添加为form元素的直接依赖项,并且效果很好。问题是当我将它们嵌套时,我需要在表单的视觉结构中保持某些完整性。

1 个答案:

答案 0 :(得分:1)

ref="form" 

在所有方面都是相同的。因此,您无法使用this。$ refs.form进行访问。而不是为此给他们起唯一的名字。例如

ref="form", ref="combo1", ref="combo2" .