值没有使用自定义选择组件更新

Question

我有一个组件，代码如下:

<template>
<select
class="
py-1.5
px-2
outline-none
border-primary-lightblue border-2
rounded-xl
transition
duration-500
focus:border-primary-blue
"
>
<option
v-for="option in optionsWithDefaultState"
:key="option.value || option"
:value="option.value || option"
:selected="(option.value || option) === defaultValue"
:disabled="option === ' '"
:hidden="option === ' '"
>
{{ option.label || option }}
</option>
</select>
</template>
<script>
export default {
model: {
prop: "value",
event: "change",
},
props: {
options: {
type: Array,
default: () => [],
},
defaultValue: {
type: [Object, String],
default: " ",
},
},
computed: {
optionsWithDefaultState() {
return [" ", ...this.options];
},
},
};
</script>
<style></style>

，当我在下面的代码中使用它时，它可以工作

<v-dropdown
:value="teacherId"
:options="teachers"
@change.native="
(val) => {
teacherId = val.target.value;
}
"
></v-dropdown>

但是这个没有，我不明白为什么

<v-dropdown
v-model="teacherId"
:options="teachers"
></v-dropdown>

在vue文档中，它说上面的代码将被翻译成我这里的第二段代码，但它仍然不能工作。

Answer 1

您没有从组件发出任何事件。因此，v-model监视进入的change事件，但这些事件从未由组件发出，因此什么也不会发生。

<select
class="
...
"
@change="$emit('change', $event)"
>