Vue. js - не может установить переключатель по умолчанию

Question

Vue документация говорит, что если начальное значение v-модели не соответствует значениям радиосвязи, оно будет отображаться как невыбранное. Я думаю, что все сделал правильно, но радио Publi c по-прежнему не проверено по умолчанию.

Компонентное радио:

<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 использование

<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"
  })
};

Я смотрел на другие соответствующие вопросы, но не вижу разницы

• как сделать переключатель по умолчанию отмеченным в vuejs?
• Vue. js Bootstrap 4, переключатель не проверяется

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

Answer 1

в вашем компонентном радио меняет проверенное значение директивы на: checked = "значение"

Радио. 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>