VueJs: обертывание el-select: элементы списка добавляются 3 раза во время обновления DOM

VueJs: обертывание el-select: элементы списка добавляются 3 раза во время обновления DOM

14.09.2019 01:01:45 Просмотров 63 Источник

Я капсулированные некоторые из превосходных элемент пользовательского интерфейса компонентов. Поскольку я обычно использую одни и те же настройки повсюду. Плюс я хотел иметь более чистый код. Все работают нормально, за исключением el-select, где я получаю ошибку DOM о дубликатах ключей.

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

enter image description here

Первоначально я просто передал список непосредственно в <el-select>получил те же ошибки, а затем сделал localListvar, то же самое.

Я добавил nextTick в разделе монтирования, здесь есть полный пример.

Содержимое списка добавляется 3 раза, отсюда и ошибка. enter image description here

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

У вопроса есть решение - Посмотреть?

Ответы - VueJs: обертывание el-select: элементы списка добавляются 3 раза во время обновления DOM / VueJs: Wrapping el-select: list elements added 3 times during DOM refreshes

sid heart

14.09.2019 01:17:04

попробовать это

ваш ключ цикла v-for-это элемент, попробуйте изменить его на индекс следующим образом

<el-option v-for="(item, index) in localList" :label="item" :value="item" :key="index" /> </el-select>
https://stackoverflow.com/questions/57934414/vuejs-wrapping-el-select-list-elements-added-3-times-during-dom-refreshes/57934526#comment102285403_57934526
спасибо sid heart просто попробовал это - теперь я получаю Duplicate keys detected: '0'. This may cause an update errorи так далее для каждого ключа.
https://stackoverflow.com/questions/57934414/vuejs-wrapping-el-select-list-elements-added-3-times-during-dom-refreshes/57934526#comment102285521_57934526
Я вроде как понял это, я исключил из образца v-ifи v-elseвокруг того, является ли это простым списком или структурированным списком объектов. это, кажется, вызывает проблемы.
Является ответом!
Anthony

14.09.2019 02:38:05

Нашел его - как и подозревал, проблема была в состоянии 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]" />

Наверное, я пытался быть слишком умным наполовину!

Закрыть X