CODEWITHSUNDEEP
vue.js
Eugene
Eugene

Reputation: 85

Vue v-for="" :key="" does not work

need some help. I have this code in App.vue:

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

And this in main.js :

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

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

So it should render an <option> item but it doesn't. And i don't know why.

Upvotes: 1

Views: 10220

Answers (2)

Thamer
Thamer

Reputation: 1954

Your template code should be like this:

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

which means if you want to bind a value to your option you need to use v-bind.

for more details please check the documentation select doc vuejs

Upvotes: 1

B. Fleming
B. Fleming

Reputation: 7220

It looks you're dealing primarily with a syntax error. Your v-for should use parentheses, not curly braces, i.e. it should be v-for="(car, index) in cars" rather than v-for="{car, index} in cars".

Additionally, I noticed you're using :key="index". If you mean to have the index be the value for that particular option, you should be doing :value="index". If using :key is intentional, then you might want to consider using a value that isn't index, something unique that won't change if the sort order of the array changes. There are legitimate uses for doing :key="index", but I don't believe you're attempting to use it for those purposes.

Upvotes: 1

Related Questions