Is there a way to make the selected item in a custom component dropdown appear, similar to this Vue.js question? I have debug output within my single file component (SFC).
<script>
export default {
props: ['modelValue', 'options'],
emits: ['update:modelValue']
}
</script>
<template>
<div>
<select
:value="modelValue"
@change="$emit('update:modelValue', JSON.parse($event.target.value))"
>
<option value="" disabled>no selection</option>
<option v-for="option in options" :value="JSON.stringify(option)" :selected="JSON.stringify(modelValue) === JSON.stringify(option)">X{{JSON.stringify(option)}}X{{JSON.stringify(modelValue) === JSON.stringify(option)}}</option>
</select>
{{modelValue}}
</div>
</template>
Another component that calls this:
<script>
import CustomInput from './CustomInput.vue'
export default {
components: { CustomInput },
data() {
return {
message: '',
blah: [
{a:"a"},
{b:2},
{c:{d:1}},
]
}
},
computed: {
theMessage() {
return JSON.stringify(this.message);
}
}
}
</script>
<template>
<CustomInput v-model="message" :options="blah"/> {{ theMessage }}
</template>
Even though the label appears to show the selected item, it doesn't get displayed as such in the dropdown. Can someone help me figure out why?