Soy un principiante que actualmente está aprendiendo Vue y Nuxt JS y desarrollando una aplicación web simple con Nuxt JS. Actualmente, estoy tratando de hacer una opción de Vue Select donde paso una matriz y tengo las opciones como elementos en la matriz. Este es mi index.vue actual (TextBox y DropDown son componentes que he definido):
<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>Cuando ejecuto este código, se compila correctamente, pero luego la consola me da la siguiente advertencia:
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>Y la vista localhost muestra:
TypeError Cannot read properties of undefined (reading 'countryName')He intentado cambiar cosas como mover la matriz debajo de created() omounted() en lugar de data() y hacer que los datos sean una lista de variables en lugar de una función que devuelve variables, pero no importa lo que intente, Vue-select sigue siendo no puedo acceder a la variedad de países, así que no estoy seguro de lo que está sucediendo.
v-for no lleva un punto y coma antes de la directiva. Elimina eso y superarás ese error.
<select v-model="selected"> <option v-for="country in countries">{{ country.countryName }}</option> </select> También debe agregar una :key única a cualquier elemento en una iteración v-for . Y por el bien de ser explícito, puede agregar un accesorio de value para indicar qué campo se usará cuando se seleccione.
<select v-model="selected"> <option v-for="country in countries" :key="country.countryName" :value="country.countryName"> {{ country.countryName }} </option> </select>