Vue.js - cannot set radio button by default

Question

Vue documentation says that if initial value of v-model does not matches radio values, it will be displayed as unselected. I think that I did everything correctly but the radio Public is still not checked by default.

Component Radio:

<template>
  <div>
    <input
      type="radio"
      :id="identifier"
      :value="identifier"
      :name="name"
      ref="radio"
      @input="updateRadio()"
      :checked="checked"
    >
    <label :for="identifier">
      <span>{{label}}</span>
    </label>
  </div>
</template>

<script>
export default {
  props: ["value", "name", "identifier", "label", "checked"],

  methods: {
    updateRadio() {
      this.$emit("input", this.$refs.radio.value);
    }
  }
};
</script>

Vue usage

<Radio v-model="share" identifier="public" label="Public" name="share"/>
<Radio v-model="share" identifier="private" label="Private" name="share"/>

export default {
  name: "SignUpForm",
  components: {
    Radio
  },
  data: () => ({
    share: "public"
  })
};

I have looked to other relevant questions but I do not see a difference

Fiddle: https://codesandbox.io/s/funny-antonelli-yoblx

user11537130 · Accepted Answer · 2020-02-03 08:31:25Z

1

in your component radio change the checked directive value into :checked="value"

Radio.vue

<template>
  <div>
    <input
      type="radio"
      :id="identifier"
      :value="identifier"
      :name="name"
      ref="radio"
      @input="updateRadio()"
      :checked="value === identifier"
    >
    <label :for="identifier">
      <span>{{label}}</span>
    </label>
  </div>
</template>

<script>
export default {
  props: ["value", "name", "identifier", "label", "checked"],

  methods: {
    updateRadio() {
      this.$emit("input", this.$refs.radio.value);
    }
  }
};
</script>

edited Feb 3, 2020 at 8:31

answered Feb 3, 2020 at 8:28

user11537130

3064 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user11537130 Over a year ago

I Update it. sorry I think it's because the checked directive is boolean and now I added a condition to check.

Leos Literak Over a year ago

Thanks, it works now. I tried boolean types originally without luck as well.

Collectives™ on Stack Overflow

Vue.js - cannot set radio button by default

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related