Vue-Select无法从数组创建选项
Vue-Select无法从数组创建选项
提问于 2022-02-16 19:26:55
我是一个初学者，目前正在学习Vue和Nuxt，并使用Nuxt开发一个简单的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://v2.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>并显示localhost视图：
TypeError
Cannot read properties of undefined (reading 'countryName')我尝试过更改一些内容，比如将数组移动到created()或挂载()下，而不是data()，并使数据成为变量列表，而不是返回变量的函数，但是不管我尝试了什么，Vue-select仍然无法访问国家数组，所以我不确定发生了什么。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-16 19:53:06
在指令之前，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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71148141
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号