I have been working with simple dropdown, and I keep having this error returned https://prnt.sc/1xdusd2 (I solved the prop problem)

then I read a bit more on that specific problem and turns out this happens when vue instance cannot find your property.

But countries is there and it is within the instance. I can't understand where I went wrong.

So, the idea is to make the dropdown reactive to the countries data I am getting from api.

data exists only on the parent component and I am sending it as a prop to the child component where I am iterating and displaying within the ooption.

can someone help me what is wrong here specifically

drop down component (child component) 


<template>
<div>
  <select v-for="(country, ) in countries" :key="country">
    <option >{{country.name}} </option>
  </select>
</div>
</template>
<script>
export default {
  name: "DropDown",
  props:['countries'],
  data() {
    return {
      selectedOption: null,
    };
  },
};
</script>


parent component ************

<template>
  <div class="step1 flex flex-col">
    <h1 class="self-start mb-5">Шаг 1.</h1>
    <div class="flex justify-center ">
      <h3 class="text-white font-medium text-xl">Выберите страну</h3>
      <div class="mx-5" >
        <DropDown :countries="countries" />
        {{}}
      </div>
    </div>
  </div>
</template>

<script>
//import Button from "./UI/Button.vue";
import DropDown from "./UI/DropDown.vue";
export default {
  name: "Step1",
  components: {
    DropDown: DropDown,
    //Button: Button,
  },
  
  data() {
    return{
      // countries: [
      //   {
      //       id: "RU",
      //       name: "Россия"
      //   },
      //   {
      //       id: "DE",
      //       name: "Германия"
      //   },
      //   {
      //       id: "EE",
      //       name: "Эстония"
      //   }
      // ],
    }
  },
  methods:{
    async fetchCountry (){
      const res = await fetch('api/countries')
      let countries = await res.json();
      return countries
    }
  },

  created() {
   
  }
};

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Vue tries to load your country data before the api fetch has finished, to bypass this add an v-if="countries" in your <select v-for="(country, ) in countries" :key="country">, then vue will only try to load it if countries is not null

CodePudding user response：

You need to have countries in your data in order for it to work in the template, try this in your parent:

import DropDown from "./UI/DropDown.vue";

export default {
  name: "Step1",

  components: {
    DropDown,
  },
  
  data() {
    return {
      countries: [],
    }
  },

  methods: {
    async fetchCountry() {
      const res = await fetch('api/countries')
      this.countries = await res.json();
    }
  },
};

And this in your child

<template>
  <select v-model="selectedOption">
    <option
      v-for="country in countries"
      :key="country.name"
      :value="country.name"
    >
      {{ country.name }}
    </option>
  </select>
</template>

<script>
export default {
  name: "DropDown",

  props: {
    countries: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      selectedOption: null,
    };
  },
};
</script>