Vuetify嵌套表单元素与$refs无法正常工作

Question

我无法让我的表单使用在表单内定义的 refs。我的结构类似于：

<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"

我想知道是否有关于此的文档，或者是哪个结构导致了它的失败。我试过将输入元素作为表单元素的直接子节点添加，这可以正常工作。问题在于当我像这样嵌套它们时，我需要保持表单的视觉结构的完整性。

- drew kroft

---

你把三个引用都命名为相同的名称（ref="form"），这是有意为之吗？ - tony19

哇...这就是为什么你不能在感冒的时候编程？我确信那就是例子，但事实并非如此，这很有道理。发表那个答案，我会将其标记为已接受。谢谢！ - drew kroft

Answer 1

ref="form" 

这个属性在所有的元素中都是相同的，因此你不能使用 this.$refs.form 访问它。你需要给它们一个唯一的名称，而不是使用 this。例如：

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

- dagalti

---

最后一部分是错误的。如果它在 v-for 中，那么 ref 才会是一个数组。 - tony19

第二句话也不正确。并不是你不能访问该引用；而是该引用不一定指向你期望的元素。 - tony19