Vue bootstrap Datalist fix [Object object] displaying?

Question

Hey lads is anyone familiar with the datalist from vue bootstrap? Mine is filled from an array as the docs specify but I get weird output...

Answer 1

You can try the below code

Approach 1:

<b-form-datalist id="input-list" :options="baysList"></b-form-datalist>


<script>
   export default {
      computed: {
          baysList() {
              return this.bays.map(x => x.value.name);
          }
      },
      data() {
         return { 
             bays: [],
         }
      }
   }
</script>

---

Approach 2:

<datalist id="input-list">
   <option v-for="bay in bays">{{ bay.value.name }}</option>
</datalist>