Разница между "v-bind:value" и "v-bind:key" в vue js

Question

Ниже мой код. Я хочу использовать тэг "select" и хочу отобразить параметры и их значение из скрипта. Я использовал "v-bind:value" для рендеринга значений из скрипта. Но есть ошибка, такая как *** "

[eslint-plugin-vue] [vue / require-v-for-key] Элементы в итерации ожидают, что у них будет v-bind:key

директивы ". ***

Поэтому я дал так **

< option v-for= "option in nationalityOpt" v-bind:value="option.value" v-bind:key = ""> {{ option.text }} < / option> ".

Если я удалил "v-bind:value" из моего кода, я не смог бы получить значения параметров в пользовательском интерфейсе. Я хочу исправить ошибку "v-bind:key", и я хотел бы знать разницу между этими двумя. Пожалуйста помоги.

<template>
 <b-card>
    <h4 slot="header" class="card-title">Employee</h4>
        <b-row>
            <b-col sm="3">
              <b-form-group>
                <label for="name">First Name </label>
                <input type="text" id="name"  class="form-control" placeholder="Enter your name" v-model="firstName">
               </b-form-group>
            </b-col>
     </b-row>
      <b-row>
            <b-col sm="3">
              <b-form-group>
                <label for="name">Nationality</label>
                <select name="" id="" class="form-control"  placeholder="Nationality" v-model="nationality">
                  <option v-for="option in nationalityOpt" v-bind:value="option.value"> {{ option.text }} </option>
                </select>
              </b-form-group>
            </b-col>
          </b-row>
      <input type="submit" value="Submit" @click="validateForm">
 </b-card>
</template>

<script>
export default {
  name: 'addEmpl',
  data () {
    return {
      firstName: '',
      nationality: '1',
      nationalityOpt: [
        { value: '1', text: 'Select' },
        { value: 'IN', text: 'Indian'},
        { value: 'OT', text: 'Others'}
        ],
    }
  }
}
</script>

Заранее спасибо.

Answer 1

Проверьте документы для List Rendering, в частности, о ключах.

Вам нужно v-bind:key в v-for, потому что он должен дифференцировать каждый представленный компонент, в случае изменения данных. Вы должны использовать оба, v-bind:key а также v-bind-value в вашем компоненте option, чтобы оно работало должным образом.

Вы можете упростить и использовать просто :key а также :value, лайк:

<option v-for="option in nationalityOpt" :value="option.value" :key="option.value"> 
    {{ option.text }}
</option>

Answer 2

В Vue.js есть несколько способов повысить эффективность рендеринга за счет повторного использования компонента. Чтобы список отображался правильно (с помощью v-for), мы должны предоставить уникальную привязку ключа к каждому элементу https://vuejs.org/v2/guide/list.html

 <select name="" id="" class="form-control"  placeholder="Nationality" v-model="nationality">
       <option v-for="option in nationalityOpt" v-bind:value="option.value" :key="option.value"> {{ option.text }} </option>
    </select>