Vue JS 3 - 自定义单选按钮在第一次渲染时未选中

Question

我正在尝试在 vue js 3 中创建一个自定义无线电组件，根据官方文档，它可以使用 v-model 来完成。我尝试应用它，但第一次渲染组件时，它不会检查所选值，但当我尝试选择另一个值时可以更新该值。

我的代码如下：

应用程序.vue

<template>
  <div>
    {{ picked }}
  </div>
  <RadioButton value="One" v-model="picked" />
  <RadioButton value="Two" v-model="picked" />
</template>

<script>
import RadioButton from "./components/RadioButton.vue";

export default {
  name: "App",
  components: {
    RadioButton,
  },
  data() {
    return {
      picked: "One",
    };
  },
};
</script>

RadioButton.vue

<template>
  <input
    type="radio"
    name="group"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  name: "RadioButton",
  props: ["modelValue"],
  emits: ["update:modelValue"],
};
</script>

我在这里模拟了我的代码。 https://codesandbox.io/s/restless-cache-2svtiz?file=/src/components/RadioButton.vue你可以看到它。谢谢你

Answer 1

这是一个带有组合的 Vue3 的工作示例。

应用程序.vue

<div>
  <label for="one">One</label>
  <RadioButton
    id="one"
    v-model="picked"
    name="num"
    value="One"
  />
  <br>
  <label for="two">Two</label>
  <RadioButton
    id="two"
    v-model="picked"
    name="num"
    value="Two"
  />
  <br>
  Picked value: {{ picked }}
</div>

<script setup lang="ts">
import { ref } from 'vue'

const picked = ref('One');
</script>

RadioButton.vue

<template>
  <input
    type="radio"
    :value="value"
    :checked="isChecked"
    @change="$emit('update:modelValue', $event.target.value)"
  >
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue';

const props = withDefaults(
  defineProps<{
    value?: string
    modelValue?: string
  }>(),
  {
    value: undefined,
    modelValue: '',
  },
);

defineEmits(['update:modelValue']);

const isChecked = computed(() => {
  return props.modelValue === props.value;
});
</script>

Answer 2

在 RadioButton.vue 中，再次添加一个 props，如下所示：

props: {
modelValue: String,
checked: {
  type: Boolean,
  required: false,
  default: false,
}

不要忘记在输入组件中添加

:checked="checked"

。 最后，在 App.vue 中，将

:checked="true"

添加到您想要默认选中的自定义组件。

Answer 3

受到 @Sergey Onishchenko 的基于 Composition API 的解决方案的启发，我在 StackBlitz 上演示了一个改进的版本：

应用程序.vue

<template>
  <div>
    <RadioButton v-model="picked" name="num" value="One" />
    <RadioButton v-model="picked" name="num" value="Two" />
    Picked value: {{ picked }}
  </div>
</template>

<script setup>
const picked = ref('One');
</script>

RadioButton.vue

<template>
  <input
    type="radio"
    :value="value"
    :checked="isChecked"
    @change="changeSelect"
  />
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue';

export interface Props {
  modelValue: string;
  value: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  'update:modelValue': [string];
}>();

function changeSelect() {
  emit('update:modelValue', props.value);
}

const isChecked = computed(() => props.modelValue === props.value);
</script>