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

osh3o9ms 于 2023-03-31 发布在 Vue.js

关注(0)|答案(2)|浏览(196)

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

应用程序版本

<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你可以看到它。谢谢

vue.js

来源：https://stackoverflow.com/questions/71151819/vue-js-3-custom-radio-button-is-unchecked-the-first-time-it-renders

2条答案

按热度按时间

ifsvaxew1#

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

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

不要忘记在输入组件中添加:checked="checked"，最后，在App.vue中，将:checked="true"添加到您希望默认选中的自定义组件。

赞(0）回复(0）举报 2023-03-31

xzlaal3s2#

下面是一个使用composition的Vue3工作示例。

应用程序版本

<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>

赞(0）回复(0）举报 2023-03-31

我来回答

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

应用程序版本

RadioButton.vue

2条答案

相关问题

热门标签

最新问答