[Vuejs]-Datalist input showing options from another Vue component

by

0👍

✅

Turns out the actual issue was with the pair of elements <InputText> and <datalist> on every item having the same id and list values. The value for list and id connect the two elements together, but once a second item is added, another pair of <InputText> and <datalist> with the same id and list values is created. Because no two elements should ever share the same id, the connection between inputs and datalists becomes confused and broken.

The solution then is to bind unique values to the id/list attributes. I used the uuid of each item since it’s a unique number:

PackItem.vue

<InputText
  type="text"
  :list="`models${uuid}`"
  placeholder="Model"
  class="p-inputtext"
  v-model="this.model"
/>
<datalist :id="`models${uuid}`">
  <option
    v-for="(suggested_model, index) in brandModels"
    :key="index"
    :value="suggested_model"
  />
</datalist>

updated codesandbox

Leave a comment