Vue v-for ="" :键=""不起作用

时间:2018-05-23 23:54:30

标签: vue.js

需要一些帮助。 我在App.vue中有这段代码:

<template>
...
  <select class="form-control">
    <option v-for="{car, index} in cars" :key="index">
      {{ car.name }}
    </option>
  </select>
...
</template>

这是在main.js:

const cars = [
  {name: 'ford', model: 'focus'}
]

new Vue({
  el: '#app',
  data: {
    cars: cars
  },
  render: h => h(App)
})

所以它应该呈现一个<option>项,但它不会。而且我不知道为什么。

1 个答案:

答案 0 :(得分:0)

它看起来主要处理语法错误。您的v-for应该使用括号,而不是大括号,即它应该是v-for="(car, index) in cars"而不是v-for="{car, index} in cars"

此外,我注意到您正在使用:key="index"。如果您的意思是index是该特定选项的值,那么您应该:value="index"。如果故意使用:key,那么您可能需要考虑使用不是index的值,如果数组的排序顺序发生变化,则该值不会发生变化。执行:key="index"有合法用途,但我不相信您会尝试将其用于此目的。