vue js中“v-bind:value”和“v-bind:key”的区别答案

【问题标题】：Difference between "v-bind:value" and "v-bind:key" in vue jsvue js中“v-bind:value”和“v-bind:key”的区别
【发布时间】：2018-10-24 02:48:25
【问题描述】：

下面是我的代码。我想使用“选择”标签，我想从脚本中呈现选项及其值。我使用“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”，则无法在 UI 中获取选项值。我想纠正“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>

提前致谢。

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

查看docs 的列表渲染，特别是关于键的信息。

您需要在 v-for 中使用 v-bind:key，因为它需要区分呈现的每个组件，以防数据发生变化。您需要在组件option 中同时使用v-bind:key 和v-bind:value，它才能正常工作。

您可以简化并只使用:key 和:value，例如：

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

【讨论】：

因此，:value 和 :key 在您的示例中具有相同的内容。那有什么区别呢？
@carloswm85 :key 用于控制列表渲染，跟踪更新并触发重新渲染。 :value 是option 的属性value，由select 使用。

【解决方案2】：

Vue.js 有一些方法可以通过重用组件来提高渲染效率。为了使列表（使用 v-for）正确呈现，我们应该为每个元素提供唯一的 :key 绑定https://vuejs.org/v2/guide/list.html#key

 <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>

【讨论】：

您可以在链接中查看。 vuejs.org/v2/guide/list.html#key Vue 将重用 DOM 元素（刷新时不需要从头重新渲染）。要确定哪个元素相同或不同，Vue 使用:key。