时间戳

首页 > 解决方案 > RE：vue-bootstrap-typeahead API（序列化器）

vue.js - RE：vue-bootstrap-typeahead API（序列化器）

问题描述

我正在制作一个使用vue-bootstrap-typeahead的 vue 应用程序。它的 API 参考中有一部分使用serializer，特别是对于来自外部资源的下拉建议。有人可以进一步向我解释一下吗？一直在网上寻找答案，但我似乎无法让它工作。这是我的代码片段。

<template>
   <div class="container">
      <vue-bootstrap-typeahead
        v-model="query"
        placeholder="search for someone"
        :serializer="input => input"
        :data="names"                      
       />
   </div>
</template>

<script>
  export default {
    data() {
     return {
     query: '',
     selectedUser: null,
     names: []
    }
   }
  },

  watch: {
   query(newQuery) {
   axios.get(`api/participant?fName=${newQuery}`)
    .then((res) => {
      this.users = res.data.items
    })
  }
}
</script>

当我使用预定义的数据数组进行建议时，它可以工作。但是当尝试从资源中查询时，它不起作用。你们之前有没有使用过这个包的经验？请帮忙。谢谢你。

标签： vue.jstypeaheadserialization

解决方案

:serializer="input => input" 意味着您的 api 返回了一些对象数组，对吗？然后你只需将元素显示为喜欢 toString()，这样你的 api 应该返回一个字符串数组。如果 api 返回例如： [{Id:1, Desc: "One"}, {Id:2, Desc:"Two"}] 你应该放在那里 :serializer="input => input.Desc"

推荐阅读