时间戳

首页 > 解决方案 > 值未使用自定义选择组件更新

vue.js - 值未使用自定义选择组件更新

问题描述

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

<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.jsuser-interfacevuejs2v-model

解决方案

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

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

推荐阅读