CODEWITHSUNDEEP
vuejs3vue-props
Meaulnes
Meaulnes

Reputation: 487

vue3 Cannot loop over an array of object passed as prop

In vue3 I am passing an array of options from parent component to child component in order to use it as options for a select. At the moment, I am not able to use it to initialize my select.

Here is the child component SmartNumberInput

   <template>
  <div>
    <div>Selected: {{ selected }} Initial:{{ initial }}</div>
    {{ options }}

    <div v-for="option in options" :key="option.value">
      {{ option.text }}
    </div>

    <input type="number" v-model="input_value" />


    <select v-model="selected">
      <option
        v-for="option in options"
        :value="option.value"
        :key="option.value"
      >
        {{ option.text }}
      </option>
</select>
    
  </div>
</template>
<script>
export default {
  props: ["initial", "options"],
  data() {
    return {
      selected: "",
      input_value: "",
    };
  },
};
</script>

Here is the parent component

<template>
  <div>
    <h1>Hi! I am the root component</h1>
    <div class="smart-number-input">
      <smart-number-input
        initial="B"
        options="[{text:'Liters',value:'A'},{text:'Gallons',value:'B'},{text:'Pints',value:'C'}]"
      />
    </div>
  </div>
</template>
  
<script>
import SmartNumberInput from "./SmartNumberInput.vue";
export default {
  data() {
    return {
      initial: "salut",
    };
  },
  components: { SmartNumberInput },
};
</script>
<style>
.smart-number-input {
  width: 100%;
  background:#EEE;
}
</style>

In the result I get (see picture) there is no option visible in the select though when the small arrow is clicked it expands with a long empty list. The {{options}} statement in the child displays what I pass as prop i.e. an array of objects but nothing is displayed in the div where I use a v-for loop. When I declare the options as data in the child both loops (div and select) work fine.

Could somebody explain what is wrong in the way I pass or use the array of options ?

enter image description here

Upvotes: 1

Views: 2176

Answers (1)

Syamsoul Azrien
Syamsoul Azrien

Reputation: 2742

change options to :options (add colon symbol)

.

if you not put colon, it will treat the value as a String...

Upvotes: 1

Related Questions