Vue bootstrap Datalist 修复 [Object object] 显示？

Question

嘿伙计们，有人熟悉 vue bootstrap 的数据列表吗？我的是按照文档指定的数组填充的，但我得到了奇怪的输出...

Answer 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>

方法二：

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

Vue bootstrap Datalist 修复 [Object object] 显示？

Vue bootstrap Datalist fix [Object object] displaying?

javascript

forms

tabs

vue.js

bootstrap-vue