Question

Vue documentation表示，如果v-model的初始值与单选值不匹配，它将显示为未选中。我认为我所做的一切都正确，但是默认情况下仍未选中“公共”广播。

分量收音机：

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

我已经看过其他相关问题，但没有发现差异

提琴：https://codesandbox.io/s/funny-antonelli-yoblx

Answer 1

在组件无线电中，将已检查的指令值更改为：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>

Vue.js-默认情况下无法设置单选按钮

1 个答案: