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

Question

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

标签： javascriptformsvue.jstabsbootstrap-vue

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>