Vue-Select 无法从数组创建选项

Question

我是一名新手，目前正在学习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() 或 mounted() 而不是 data() 下，并使数据成为变量列表而不是 returns 变量的函数，但无论如何我试过了，Vue-select 仍然无法访问国家数组，所以我不确定发生了什么。

Answer 1

v-for 指令前不带分号。删除它，您将克服该错误。

    <select v-model="selected">
      <option v-for="country in countries">{{ country.countryName }}</option>
    </select>

您还应该向 v-for 迭代中的任何元素添加唯一的 :key。为了 being-explicit 的缘故，您可以添加一个 value 属性来指示选择时将使用哪个字段。

    <select v-model="selected">
      <option v-for="country in countries" :key="country.countryName" :value="country.countryName">
        {{ country.countryName }}
      </option>
    </select>

Vue-Select 无法从数组创建选项

Vue-Select is Unable to Create Options from an Array

javascript

vue.js

vuejs2

nuxt.js

vue-select