CODEWITHSUNDEEP
javascriptvuejs2vuetify.js
Brendan
Brendan

Reputation: 161

Vuetify radio group component - bind value to v-model in parent

I have the following. A parent view with two fields that go in the parent form. The v-text-field is working as intended with it binding to the model in the parent. The radio field as shown in the code snippet doesn't. I have found a workaround which involves giving the radio a v-model itself and emitting a v-on:change event and handling that with a method in the parent view. I wonder if there is a more elegant way of doing this similar to what is being done with the textfield .

Form.vue

<Text v-model="textVal"></Text>
<Radio v-model="radioVal"></Radio>

export default {
  data() {
    return {
      textVal: '',
      radioVal: '',
    }
  }
}

Text.vue

<v-text-field
  :value="value"
  v-on:input="$emit('input', $event)"
></v-text-field>

Radio.vue

<v-radio-group
  :value="value"
  v-on:input="$emit('input', $event)"
>
  <v-radio value="one" label="One"></v-radio>
  <v-radio value="two" label="Two"></v-radio>
</v-radio-group>

Upvotes: 2

Views: 2607

Answers (2)

Steinie
Steinie

Reputation: 5

You could also just use a v-model on the v-radio-group element. For example:

<v-radio-group
  v-model='holderVariable'
>
  <v-radio value="one" label="One"></v-radio>
  <v-radio value="two" label="Two"></v-radio>
</v-radio-group>

the holder variable would then have the value of whichever radio button is clicked

Upvotes: 0

Brendan
Brendan

Reputation: 161

The radio should emit an input event on change like so:

<v-radio-group
  :value="value"
  v-on:change="$emit('input', $event)"
>

Upvotes: 3

Related Questions