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

【问题标题】：Vue bootstrap Datalist fix [Object object] displaying?Vue bootstrap Datalist 修复 [Object object] 显示？
【发布时间】：2021-09-25 05:51:24
【问题描述】：

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

【问题讨论】：

你能发布数据在bays对象中的样子吗？
感谢我现在编辑问题，我只想访问名称但 bays.name 不起作用..
Bays.value.name 也不起作用：/
现在你能解释一下输出应该是什么样子吗？
你能看看这是否有帮助bootstrap-vue.org/docs/components/form#datalist-helper

标签： javascript forms vue.js tabs bootstrap-vue

【解决方案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>

【讨论】：