Parsing Array value as props in Vue.JS

Question

I have the following component which are used for "select" option in parent:

<template>
  <label class="label" for="select">{{ label }}</label>
  <select class="form-control form-control" v-bind:name="name" id="select">
    <option v-bind:options="options" v-for="(value, index) in options" :key="index">{{ value.objectValue }}</option>
  </select>
</template>


export default {
  name: "Select",
  props: {
    label: String,
    options: Array,
    name: String,
    objectValue: String
  }
}

The array I parse consist of objects and looks like this:

let array = [{name: valueOne}, {name: valueTwo}]

My problem is when I pass the prop "objectValue" it does not select it. This is how I use the component:

<Select label="Select country" objectValue="name" v-bind:options="array"/>

So I get a blank array, but with the correct amount of values. So the problem should be around the parsing of the "name" value from objectValue props.

Answer 1

The select needs a v-model with an intial value.

1. Declare a data property (named selectedOption ), and bind <select>.v-model to it:

    <template> <select v-model="selectedOption">...</select> </template> <script> export default { data() { return { selectedOption: null } } } </script>

2. Add a watcher on objectValue that copies the new value to selectedOption :

    export default { watch: { objectValue: { handler(newValue) { this.selectedOption = newValue }, immediate: true, }, } }

demo