Vue.js 具有 HTML <select> 和 v-model（符合 W3C 标准）的自定义组件

Question

我是 Vue.js 的新手（使用 Nuxt.js），我想要实现的是拥有一个 Select 组件，我可以在任何地方重复使用并且符合 W3C 标准.

在@Jasmonate 回答的帮助下，我设法创建了这个组件，它正在运行。但是 value 属性在源代码中仍然可见，因此不符合 W3C。也许问题出在项目的其他地方？！

父组件

<custom-select
  :options="options"
  v-model="selectedOption"
></custom-select>
<span>Selected : {{ selectedOption }}</span>

<script>
  data() {
    return {
      selectedOption: "A",
      options: [
        { label: "One", value: "A" },
        { label: "Two", value: "B" },
        { label: "Three", value: "C" }
      ],
    };
  }
</script>

自定义-select.vue

<template>
  <select :value="value" @input="clicked">
    <option
      v-for="option in options"
      :key="option.label"
      :value="option.value"
    >
      {{ option.label }}
    </option>
  </select>
</template>

<script>
  export default {
    props: {
      value: {
        required: true
      },
      options: {
        type: Array,
        required: true
      }
    },
    methods: {
      clicked($event) {
        this.$emit("input", $event.target.value);
      }
    }
  };
</script>

我阅读了那些文档页面：

并且还浏览了网络以查找自定义组件中的 v-model 示例，但它始终与输入标签有关。我发现的关于带有 v-model 的自定义 select 的唯一示例实际上并不是 select 标记，例如 Whosebug 上的 Vue Select plugin or 。

Answer 1

v-model 是语法糖。默认情况下，该值是一个名称为 value 的 prop，只要事件 input 发出，它就会更改（双向绑定）。

此外，v-model 绑定在 select 元素上，而不是 option。

您的代码可以这样修改：

<template>
  <select :value="value" @input="clicked">
    <option
      v-for="option in options"
      :key="option.label"
      :value="option.value"
    >
      {{ option.label }}
    </option>
  </select>
</template>

<script>
  export default {
    props: {
      value: {
        required: true
      },
      options: {
        type: Array,
        required: true
      }
    },
    methods: {
      clicked($event) {
        this.$emit('input', $event.target.value);
      }
    }
  };
</script>

此处的文档：https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

您还可以更改v-model使用的道具名称和事件名称，参见：https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

Vue.js 具有 HTML <select> 和 v-model（符合 W3C 标准）的自定义组件

Vue.js custom component with HTML <select> and v-model (W3C compliant)

html-select

w3c-validation

vue.js

nuxt.js

v-model