Пользовательский компонент Vue.js с HTML <select>и v-моделью (совместимый с W3C) - PullRequest
Новая
       103

Пользовательский компонент Vue.js с HTML <select>и v-моделью (совместимый с W3C)

0 голосов
/ 23 октября 2019

Я новичок в 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-моделью, на самом деле не является тегом выбора, таким как плагин Vue Select или этот поток в StackOverflow.

1 Ответ

1 голос
/ 23 октября 2019

v-model - синтаксический сахар. По умолчанию значение является реквизитом с именем value, и оно изменяется (двусторонняя привязка) всякий раз, когда генерируется событие 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

...