Vue中v-for与:key配置后<select>的<option>不渲染问题求助

你的问题核心出在数据作用域不匹配上——你把cars数组定义在了根Vue实例的data里，但App.vue作为独立组件，无法直接访问根实例的数据，导致v-for遍历的是空集合，自然渲染不出<option>元素。下面给你两种简单可行的解决思路：

方案一：将数据移到App.vue组件内部（最推荐） #

把cars数组直接放在App.vue自己的data中，让组件能直接访问到数据：

修改后的App.vue代码：

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

<script>
export default {
  data() {
    return {
      cars: [{name: 'ford', model: 'focus'}]
    }
  }
}
</script>

对应的main.js可以简化为：

import Vue from 'vue'
import App from './App.vue'

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

方案二：通过Props传递数据（需保留根实例数据时使用） #

如果必须把数据存在根实例中，可以通过props把cars传递给App组件：

首先修改main.js，在渲染App时传入props：

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

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

然后在App.vue中声明接收这个props：

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

<script>
export default {
  props: {
    cars: {
      type: Array,
      required: true
    }
  }
}
</script>

最后提个小优化建议：v-for的key尽量使用数据的唯一标识（比如如果car有id属性就用car.id），而不是数组索引index，这样在数组元素顺序变动时，Vue的虚拟DOM更新会更高效。

内容的提问来源于stack exchange，提问作者Eugene