Radio buttons with Vue.js v3

[dsm23]

Hey, I'm trying out the material radio buttons within a Vue.js project. Applying v-model to a component means that it receives the prop modelValue which these buttons do not understand because it is not a standard attribute. https://v3.vuejs.org/guide/migration/v-model.html#overview

The best I could come up with to get a round this problem is to avoid v-model altogether

<template>
    <form>
        <mwc-formfield label="Larry">
          <mwc-radio
            name="stooge"
            value="larry"
            v-on:input="stooge = $event.target.value"
            v-bind:checked="stooge === 'larry'"
          ></mwc-radio>
        </mwc-formfield>
        <mwc-formfield label="Moe">
          <mwc-radio
            name="stooge"
            value="moe"
            v-on:input="stooge = $event.target.value"
            v-bind:checked="stooge === 'moe'"
          ></mwc-radio>
        </mwc-formfield>
        <mwc-formfield label="Curly">
          <mwc-radio
            name="stooge"
            value="curly"
            v-on:input="stooge = $event.target.value"
            v-bind:checked="stooge === 'curly'"
          ></mwc-radio>
        </mwc-formfield>

      <mwc-button raised type="submit" label="Submit"></mwc-button>
    </form>
    <div>
      <pre>{{ JSON.stringify({ stooge }, null, 2) }}</pre>
    </div>
</template>

<script>
import "@material/mwc-button";
import "@material/mwc-formfield";
import "@material/mwc-radio";

export default {
  data: () => ({
    stooge: "larry",
  }),
};
</script>

So I've jettisoned any two-way data binding. I'm new to Vue so even without any change to the material button, a suggestion of how to better handle the binding would be welcome

[asyncLiz]

Thanks for the issue! v-model doesn't support all web components directly (vuejs/vue#7830) since it expects a specific non-native pattern to be followed for custom elements.

Instead, you can directly bind to the property and event, like you are doing in your template (though the correct event to listen to is the change event). That's the correct recommendation for two-way data binding!

You can also use Vue 3's shorthand :prop and @event syntax instead of v-on and v-bind:

<mwc-formfield label="Larry">
  <mwc-radio
    name="stooge"
    value="larry"
    @change="stooge = $event.target.value"
    :checked="stooge === 'larry'"
  ></mwc-radio>
</mwc-formfield>

Hope that helps, let us know if you have any other questions.