值未使用自定义选择组件更新答案

【问题标题】：Value is not updating with custom select component值未使用自定义选择组件更新
【发布时间】：2021-10-29 14:22:45
【问题描述】：

我有一个包含以下代码的组件：

<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 文档中它说上面的代码将被转换为我在这里的第二个代码，但它仍然无法正常工作。

【问题讨论】：

第二个例子会发生什么？你能说得更清楚些吗？
它按预期工作，值更新

标签： vue.js user-interface vuejs2 v-model

【解决方案1】：

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

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

【讨论】：