无法检索单选按钮视图 3 值
cannot retrieve radio button view 3 value
我创建了一个发射事件的单选按钮组件,但我的 v-model 仍然是空的
我看不出问题出在哪里我在控制台中没有错误
导入组件单选按钮
数据性别:'';
<RadioButton group="gender" val="Mme" label="Mme" :model="gender" />
组件
<template>
<div class="radioButton">
<label :for="`radio${uuid}`">{{ label }}</label>
<input
:disabled="disabled"
:name="group"
type="radio"
:id="`radio${uuid}`"
:value="val"
:checked="value === val"
@click="$emit('update:val', $event.target.value)"
/>
</div>
</template>
<script>
import { uuid } from 'vue-uuid';
export default {
name: 'RadioButton',
emits: ['update:val'],
model: {
props: 'val',
event: 'update:val'
},
props: {
val: { type: [String, Number], required: true },
value: { type: [String, Number], required: true },
group: { type: String, required: true },
label: { type: String, required: true },
disabled: { type: Boolean, default: false },
variant: { type: String, default: null }
},
data() {
return {
uuid: uuid.v4()
};
}
};
</script>
看起来有些事情可能混淆了。根据 migration strategy doc. You can have a look at the docs for v-model
here
,model
似乎在 vue v3 中不再需要
看起来像
<RadioButton group="gender" val="Mme" label="Mme" :model="gender" />
应该是
<RadioButton group="gender" val="Mme" label="Mme" v-model="gender" />
这是来自文档的示例
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
emits: ['update:modelValue'],
template: `
<input type="text"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)">
`,
created() {
console.log(this.modelModifiers) // { capitalize: true }
}
})
请注意,要使用 v-model,您需要发出 update:modelValue
并接受 modelValue
作为 prop
所以您的代码现在可能看起来像这样
<template>
<div class="radioButton">
<label :for="`radio${uuid}`">{{ label }}</label>
<input
:disabled="disabled"
:name="group"
type="radio"
:id="`radio${uuid}`"
:value="val"
:checked="value === val"
@click="$emit('update:modelValue', val)"
/>
</div>
</template>
<script>
import { uuid } from "vue-uuid";
export default {
name: "RadioButton",
emits: ["update:modelValue"],
props: {
modelValue: String,
val: { type: [String, Number], required: true },
value: { type: [String, Number], required: true },
group: { type: String, required: true },
label: { type: String, required: true },
disabled: { type: Boolean, default: false },
variant: { type: String, default: null },
},
data() {
return {
uuid: uuid.v4(),
};
},
};
</script>
我创建了一个发射事件的单选按钮组件,但我的 v-model 仍然是空的 我看不出问题出在哪里我在控制台中没有错误
导入组件单选按钮 数据性别:'';
<RadioButton group="gender" val="Mme" label="Mme" :model="gender" />
组件
<template>
<div class="radioButton">
<label :for="`radio${uuid}`">{{ label }}</label>
<input
:disabled="disabled"
:name="group"
type="radio"
:id="`radio${uuid}`"
:value="val"
:checked="value === val"
@click="$emit('update:val', $event.target.value)"
/>
</div>
</template>
<script>
import { uuid } from 'vue-uuid';
export default {
name: 'RadioButton',
emits: ['update:val'],
model: {
props: 'val',
event: 'update:val'
},
props: {
val: { type: [String, Number], required: true },
value: { type: [String, Number], required: true },
group: { type: String, required: true },
label: { type: String, required: true },
disabled: { type: Boolean, default: false },
variant: { type: String, default: null }
},
data() {
return {
uuid: uuid.v4()
};
}
};
</script>
看起来有些事情可能混淆了。根据 migration strategy doc. You can have a look at the docs for v-model
here
model
似乎在 vue v3 中不再需要
看起来像
<RadioButton group="gender" val="Mme" label="Mme" :model="gender" />
应该是
<RadioButton group="gender" val="Mme" label="Mme" v-model="gender" />
这是来自文档的示例
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
emits: ['update:modelValue'],
template: `
<input type="text"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)">
`,
created() {
console.log(this.modelModifiers) // { capitalize: true }
}
})
请注意,要使用 v-model,您需要发出 update:modelValue
并接受 modelValue
作为 prop
所以您的代码现在可能看起来像这样
<template>
<div class="radioButton">
<label :for="`radio${uuid}`">{{ label }}</label>
<input
:disabled="disabled"
:name="group"
type="radio"
:id="`radio${uuid}`"
:value="val"
:checked="value === val"
@click="$emit('update:modelValue', val)"
/>
</div>
</template>
<script>
import { uuid } from "vue-uuid";
export default {
name: "RadioButton",
emits: ["update:modelValue"],
props: {
modelValue: String,
val: { type: [String, Number], required: true },
value: { type: [String, Number], required: true },
group: { type: String, required: true },
label: { type: String, required: true },
disabled: { type: Boolean, default: false },
variant: { type: String, default: null },
},
data() {
return {
uuid: uuid.v4(),
};
},
};
</script>