Есть обертка-компонент для select:
<template>
<select v-on="listeners" :value="value">
<option v-for="(option, index) of list" :key="index" :value="option">{{ option }}</option>
</select>
</template>
<script>
export default {
name: "x-select",
props: {
value: {
type: [Number, String, Boolean],
required: false,
default: ""
},
list: {
type: Array,
required: false,
default: () => []
}
},
computed: {
listeners() {
return {
...this.$listeners,
input: ({ target: { value } }) => this.$emit("input", value)
};
}
}
};
</script>
Данный компонент берет значение для $emit из event.target.value. В этом свойстве значение всегда будет c типом string. Что если мне нужно получать значение того типа, которое я туда положил, то есть из массива
list? Так, например, работает нативный select, если не использовать его в виде компонента, как добиться такого эффекта,
от куда брать значение для $emit?
Как я использую компонент:
<template>
<x-select v-model="selected" :list="list" />
</template>
<script>
export default {
name: "app",
data: () => ({
list: [1, true, "124.5", false, 15.7],
selected: 1
})
};
</script>
В этом коде после первого выбора selected свойство всегда будет иметь тип string. Я конечно могу использовать дерективы v-model.number, чтобы переобразовать в числа, но с boolean значениями это не поможет. А что если мне приходят числа в типе number и string и я не хочу менять их тип?
Вот как работает нативный select и здесь все хорошо с типами:
<template>
<select v-model="selected">
<option v-for="(option, index) of list" :key="index" :value="option">
{{ option }}
</option>
</select>
</template>
<script>
export default {
name: "app",
data: () => ({
list: [1, true, "124.5", false, 15.7],
selected: 1
})
};
</script>
В этом коде в свойстве
selected будет именно то значение, которое есть в массив
list с тем же самым типом. Подскажите как добиться такого результата? Неужели самому парсить?
Песочница:
1.
Компонент обертка
2.
Нативный select 
Простой