As a novice in the world of Vue and Nuxt JS, I am currently immersed in learning and developing a simple web application with Nuxt JS. One specific challenge I am facing is creating a Vue Select option where I pass an array and have the options represent the elements within that array. Below is my current index.vue file (where TextBox and DropDown are components I have previously defined):
<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>
After successfully compiling the code, the console presents the following warning:
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>
Furthermore, the localhost view reports:
TypeError
Cannot read properties of undefined (reading 'countryName')
Despite attempting various adjustments such as relocating the array within created() or mounted() methods instead of data(), and altering the data structure, I have not succeeded in resolving the issue. It seems that the Vue-select is unable to access the array of countries, leaving me puzzled about the cause of this behavior.