title: vuejs maintaining state in v-for with el-select from Element UI
body: <p>Ok, i have a form with an array of string locales ('it', 'en', etc), so i made a simple <code>v-for</code> to display some remote search <code>el-select</code> from <a href="https://element.eleme.io/2.1/#/en-US/component/select#remote-search" rel="nofollow noreferrer">ElementUI</a>.</p>
  <p>(For who does not know, <code>el-select</code> with remote search it's kinda a select that made an api call to retrieve values from server to fill options list while the user write, so it start with an empty options list and each time is filled based on the user input with what the server returns.)</p>
  <p>Initially my array is just a <code>[null]</code>, so in the form is displayed an empty <code>el-select</code>, but with a simple add button i can <code>array.push(null)</code> to expand it.</p>
  <p>The list rendering code is in the form of</p>
  <pre><code>&lt;div v-for=&quot;(locale, index) in locales&quot;
    :key=&quot;index&quot;&gt;
  
    /*...*/
  
  &lt;/div&gt;
  </code></pre>
  <p>so i use my array index to maintain state.</p>
  <p>So far so good: when selecting data from the <code>el-select</code> and when pushing the code works just fine.</p>
  <p>The problem arise when i delete one of the array elements but the last with <code>array.splice(index,1)</code>: the correct array element is deleted, but it's like vue just deleted the last of the <code>el-select</code> but not the one related to the correct array element, so now the every select from the index of the deleted array element to the last has a value not matching its options.</p>
  <p>e.g.: my array is <code>['it','fr','es','ko']</code>, so my inputs are displaying 'Italian', 'French', 'Spanish', 'Korean'; but when deleting <code>array[1]</code> -&gt; 'fr' i got my selects displaying 'Italian', 'es', 'ko'.</p>
  <p>Just to be clear, my array contains <code>String</code> element, not <code>Object</code>s, so the <a href="https://v2.vuejs.org/v2/guide/list.html#Maintaining-State" rel="nofollow noreferrer">example</a> from the docs doesn't apply since it uses an object.</p>
  <p>How can i do to maintain state when deleting an array element?</p>