title: VueJs: Wrapping el-select: list elements added 3 times during DOM refreshes
body: <p>I've encapsulated some of the excellent <a href="https://element.eleme.io/2.8/#/en-US/component/installation" rel="nofollow noreferrer">element-ui</a> components. Since I generally use the same settings all over the place. Plus I wanted to have cleaner code. All are working OK, except the <code>el-select</code> where I get a DOM error about duplicate keys.</p>
  
  <pre><code>[Vue warn]: Duplicate keys detected: 'XXX VALUE'. This may cause an update error.
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/xNTBd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xNTBd.png" alt="enter image description here"></a></p>
  
  <p>Originally I just passed the list direct to the <code>&lt;el-select&gt;</code> got the same errors, then made a <code>localList</code> var, same thing.</p>
  
  <p>I've added nextTick in the mounted section, there is a full example here.</p>
  
  <p>The contents of the list get added <strong>3 times</strong>, hence the error.
  <a href="https://i.stack.imgur.com/RAA79.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RAA79.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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: '&lt;el-form-item :label="label" v-if="localList"&gt;&lt;el-select v-if="!disabled" v-model="form" placeholder="Select..." :disabled="disabled" @change="updated"&gt;&lt;el-option v-if="item[valueKey]" v-for="item in localList" :label="item[labelValue]":value="item[valueKey]" :key="item[valueKey]" /&gt;&lt;el-option v-else v-for="(item, index) in list" :label="item" :value="item" :key="index" /&gt;&lt;/el-select&gt; &lt;b v-else&gt;{{this.form}}&lt;/b&gt;&lt;/el-form-item&gt;'
  })
  
  var app = new Vue({
    el: '#app',
    data: {
      select1: null,
      select2: null,
      list: ['Minutes', 'Hours', 'Days']
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;!-- import CSS --&gt;
  &lt;link rel="stylesheet" href="https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css"&gt;
  &lt;!-- import JavaScript --&gt;
  &lt;script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
  
  &lt;div id="app"&gt;
    &lt;h3&gt;Normal Select Works OK&lt;/h3&gt;
    &lt;el-select v-model="select1" placeholder="Select..."&gt;
      &lt;el-option v-for="item in list" :value="item" :key="item"&gt;&lt;/el-option&gt;
    &lt;/el-select&gt;
   
    &lt;p&gt;You chose: &lt;b&gt;{{select1}}&lt;/b&gt;&lt;/p&gt;
    
    &lt;hr /&gt;
  
    &lt;h3&gt;Wrapped Component Select Works Gives Errors&lt;/h3&gt;
    &lt;p&gt;&lt;i&gt;See browser console&lt;/i&gt;&lt;/p&gt;
  
    &lt;el-form&gt;
      &lt;select-input label="Period" v-model="select2" :list="list"&gt;&lt;/select-input&gt;
    &lt;/el-form&gt;
    &lt;p&gt;You chose: &lt;b&gt;{{select2}}&lt;/b&gt;&lt;/p&gt;
    
  
  &lt;/div&gt;
  
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>