[Vuejs]-Dynamic Array in Data list not showing up

by

0👍

Avoid using the same Vue :key for direct children under a single root element:

    <!-- Datalist for Search Bar -->
    <datalist id="search-list-id">
      <!-- prefix key with string 'sizes-' -->
      <option v-for="(size,index) in sizes" :key="'sizes-'+index">{{ size }}</option>
      <!-- prefix key with string 'search-' -->
      <option v-for="(item, index) in searchArray" :key="'search-'+index">{{item}}</option>
    </datalist>

Otherwise Vue is seeing the same key value for two <options> under the one <datalist> element.

You could also simplify this to use the <b-form-datalist> helper component:

    <!-- Datalist for Search Bar -->
    <b-form-datalist id="search-list-id" :options="[...sizes, ...searchArray]">
    </b-form-datalist>

Leave a comment