[Vuejs]-How to I make the select drop down show the currently selected value in Vue?

by

0👍

You can use v-model in your child component and bubble the event to parent with computed setter/getter

App.vue

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: { CustomInput },
  data() {
    return {
      message: '',
      blah: [
        {a:"a"},
        {b:2},
        {c:{d:1}},
      ]
    }
  },
}
</script>

<template>
  <CustomInput v-model="message" :options="blah" /> {{ message }}
</template>

CustomInput.vue

<script>
export default {
  props: ['modelValue', 'options'],
  emits: ['update:modelValue'],
  computed: {
    internalValue: {
      get() {
        return this.modelValue;
      },
      set(newVal) {
        this.$emit('update:modelValue', newVal)
      }
    }
  }
}
</script>

<template>
  <div>
  <select

        v-model="internalValue"
  >
    <option value="" disabled>no selection</option>
    <option v-for="option in options" :value="JSON.stringify(option)" :selected="JSON.stringify(modelValue) === JSON.stringify(option)">{{
      option}}</option>
  </select>
  </div>
</template>

(I’m not sure your JSON.stringy is usefull)

Leave a comment