我一直在使用簡單的下拉串列，并且一直回傳此錯誤https://prnt.sc/1xdusd2（我解決了道具問題）
然后我閱讀了更多關于該特定問題的內容，結果發現當 vue 實體找不到您的屬性時會發生這種情況。
但是國家就在那里，而且在實體中。我不明白我哪里出錯了。
所以，這個想法是讓下拉選單對我從 api 獲得的國家資料做出反應。
資料僅存在于父組件上，我將它作為道具發送到我在 ooption 中迭代和顯示的子組件。
有人可以幫助我這里具體有什么問題嗎
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() {
}
};uj5u.com熱心網友回復：
Vue 嘗試在 api fetch 完成之前加載您的國家/地區資料，以繞過v-if="countries"在您的<select v-for="(country, ) in countries" :key="country">.
uj5u.com熱心網友回復：
您需要在資料中包含國家/地區才能使其在模板中作業，請在您的父級中嘗試此操作：
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();
}
},
};
這在你的孩子身上
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/338434.html
標籤：javascript Vue.js
下一篇：等待異步forEach