我是一名初學者，目前正在學習 Vue 和 Nuxt JS，并使用 Nuxt JS 開發一個簡單的 Web 應用程式。目前，我正在嘗試制作一個 Vue Select 選項，其中我傳遞一個陣列，并且我的選項是陣列中的元素。這是我當前的 index.vue（TextBox 和 DropDown 是我定義的組件）：
<template>
<body>
<div id = "app">
<select v-model="selected">
<option :v-for="country in countries">{{ country.countryName }}</option>
</select>
<br/>
<TextBox label = "Name of new country:"/>
<TextBox label = "Code of new country:"/>
<button>Submit</button>
<br/>
<br/>
<TextBox label = "Name of new state/province:"/>
<TextBox label = "Code of new state/province:"/>
<DropDown label = "Countries of this state/province"/>
</div>
</body>
</template>
<script>
export default {
name: 'IndexPage',
data() {
return {
selected: "",
countries: [{"countryName":"Canada"}, {"countryName":"US"}, {"countryName":"UK"}, {"countryName":"France"}]
};
},
}
</script>
當我運行這段代碼時，它編譯成功，但是控制臺給了我以下警告：
ERROR [Vue warn]: Property or method "country" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <IndexPage> at pages/index.vue
<Nuxt>
<.nuxt/layouts/default.vue> at .nuxt/layouts/default.vue
<Root>
本地主機視圖顯示：
TypeError
Cannot read properties of undefined (reading 'countryName')
我已經嘗試改變一些事情，比如在 created() 或 mount() 下移動陣列而不是 data() 并使資料成為變數串列而不是回傳變數的函式，但無論我嘗試什么，Vue-select 仍然無法訪問國家/地區的陣列，所以我不確定發生了什么。
uj5u.com熱心網友回復：
v-for指令前不帶分號。洗掉它，您將克服該錯誤。
<select v-model="selected">
<option v-for="country in countries">{{ country.countryName }}</option>
</select>
您還應該為迭代:key中的任何元素添加唯一性。v-for并且為了明確起見，您可以添加一個value道具來指示選擇時將使用哪個欄位。
<select v-model="selected">
<option v-for="country in countries" :key="country.countryName" :value="country.countryName">
{{ country.countryName }}
</option>
</select>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/426733.html