Question

我已经封装了一些出色的element-ui组件。由于我通常在各处使用相同的设置。另外，我想拥有更简洁的代码。一切正常，除了el-select以外，我在该处收到有关重复键的DOM错误。

[Vue warn]: Duplicate keys detected: 'XXX VALUE'. This may cause an update error.

最初，我只是将列表直接传递给<el-select>，但遇到了相同的错误，然后又做了一个localList var，同样的事情。

我在安装的部分中添加了nextTick，这里有完整的示例。

列表的内容被添加了 3次，因此出现错误。

// Please note: The original code is a .vue component, modified it for this example.

Vue.component('select-input', {
  props: {
    label: {
     type: String,
     default: 'Select'
    },

  value: {
      required: true
    },

    list: {
      type: Array,
      default: null
    },
    
    disabled: {
     type: Boolean,
     default: false
    }
  },

  methods: {
    init () {
      this.localList = this.list
    },

    updated (value) {
      this.form = value
      this.$emit('input', this.form)
      this.$emit('change', this.form)
    }
  },

  data () {
    return {
      form: this.value,
      localList: []
    }
  },


  mounted () {
    this.$nextTick().then(this.init())
  },

  template: '<el-form-item :label="label" v-if="localList"><el-select v-if="!disabled" v-model="form" placeholder="Select..." :disabled="disabled" @change="updated"><el-option v-if="item[valueKey]" v-for="item in localList" :label="item[labelValue]":value="item[valueKey]" :key="item[valueKey]" /><el-option v-else v-for="(item, index) in list" :label="item" :value="item" :key="index" /></el-select> <b v-else>{{this.form}}</b></el-form-item>'
})

var app = new Vue({
  el: '#app',
  data: {
    select1: null,
    select2: null,
    list: ['Minutes', 'Hours', 'Days']
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script>

<body>

<div id="app">
  <h3>Normal Select Works OK</h3>
  <el-select v-model="select1" placeholder="Select...">
    <el-option v-for="item in list" :value="item" :key="item"></el-option>
  </el-select>
 
  <p>You chose: <b>{{select1}}</b></p>
  
  <hr />

  <h3>Wrapped Component Select Works Gives Errors</h3>
  <p><i>See browser console</i></p>

  <el-form>
    <select-input label="Period" v-model="select2" :list="list"></select-input>
  </el-form>
  <p>You chose: <b>{{select2}}</b></p>
  

</div>



</body>

Answer 1

尝试

您的v-for循环键是项尝试将其更改为这样的索引

<el-option v-for="(item, index) in localList" :label="item" :value="item" :key="index" /> </el-select>

Answer 2

找到了它-怀疑是 v-else 条件造成的。由于有了一个简单的列表，而不是带有标签，值对的对象数组，它将进入else条件。

<el-option v-if="item[valueKey]" v-for="item in localList"
 :label="item[labelValue]":value="item[valueKey]" :key="item[valueKey]" />

<el-option v-else v-for="(item, index) in list"
  :label="item" :value="item" :key="index" />

如果该组件得到一个简单列表，则它现在对其进行处理，以便可以按以下方式对其进行处理：

<el-option v-for="item in localList"
 :label="item[labelValue]":value="item[valueKey]" :key="item[valueKey]" />

我想我想把自己变得聪明一半！

VueJs：包装el-select：列表元素在DOM刷新期间添加了3次

2 个答案: