如何将 Axios 与 Vue-Multiselect 一起使用?
Posted
技术标签:
【中文标题】如何将 Axios 与 Vue-Multiselect 一起使用?【英文标题】:How to use Axios with Vue-Multiselect? 【发布时间】:2019-02-11 21:20:40 【问题描述】:使用 Vue-Multiselect 的新手。我正在使用 axios 从 JSON 占位符执行 GET 请求以进行测试。
如何让标题和帖子 ID 显示在我的下拉列表中?
现在,我的选择框中只显示了 [Object Object] - [title]。
<!-- Vue component -->
<template>
<div>
<multiselect v-model='value' :options='posts' :custom-label='postWithTitle' placeholder='Select one' label='title' track-by='id'></multiselect>
value
</div>
</template>
<script>
import Multiselect from "vue-multiselect";
import axios from "axios";
export default
// OR register locally
components: Multiselect ,
data()
return
value: null,
posts: []
;
,
created()
this.getPosts();
,
methods:
getPosts()
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then(response =>
// eslint-disable-next-line
console.log(response);
this.posts = response.data;
)
.catch(error =>
// eslint-disable-next-line
console.log(error);
);
,
postWithTitle(id, title)
return `$id - [$title]`;
;
</script>
【问题讨论】:
【参考方案1】:修复:
postWithTitle(option)
return `$option.id - [$option.title]`;
说明:
当我在 postWithTitle
函数中简单地 console.log
ged 时,我看到了这一点:
自定义custom-label
属性正在接受一个只接受一个参数的回调。该参数是整个 option
对象 - 您的 posts
数组的单个条目。
【讨论】:
以上是关于如何将 Axios 与 Vue-Multiselect 一起使用?的主要内容,如果未能解决你的问题,请参考以下文章
如何将 Axios 与 Vue-Multiselect 一起使用?