[Vuejs]-Vue bootstrap Datalist fix [Object object] displaying?

by

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>

Leave a comment