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>

custom-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模型的示例，但这始终与输入标签有关。我发现的关于带有v-model的自定义select的唯一示例实际上不是select标签，例如Vue Select插件或StackOverflow上的this thread。

Answer 1

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

另外，v模型绑定在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

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

1 个答案: