Vuetify nested form elements not working with $refs

3
votes

I'm unable to get my form to be able to utilize the refs I've defined within my form. My structure looks something a little like this:

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

I haven't been able to find any documentation around this, but it appears that my structure within the form is making it so the refs are not available to me. I'm receiving this error:

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

I'm just wondering if there's any documentation on this, or what about this structure is causing this to fail. I've tried adding input elements as a direct decedent of the form element, and that works just fine. The problem is when I nest them like, which I need to maintain some integrity in the visual structure of my form.

1
vue.jsvuetify.js
You've named three refs exactly the same (ref="form"). Was that intentional? – tony19
Wow... this is why you don't code with the flu? I was positive that's how the example was, but it's not, and that makes sense. Post that answer I'll mark it as accepted. Thanks! – drew kroft

1 Answers

1
votes
ref="form"

is same on all. So you are not able to access that with this.$refs.form . instead of this give unique name to them. for example 

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