如何将 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.logged 时,我看到了这一点:

自定义custom-label 属性正在接受一个只接受一个参数的回调。该参数是整个 option 对象 - 您的 posts 数组的单个条目。

【讨论】:

以上是关于如何将 Axios 与 Vue-Multiselect 一起使用?的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Axios 与 Vue-Multiselect 一起使用?

如何通过 Axios 将文件和数据一起发布?

如何使用 axios 进行 https 调用?

如何使用 Axios 将大对象作为字符串发布?

如何将一组数据从客户端传递到 axios post 请求的 req.body

如何使用 VueJS 和 AXIOS 映射 JSON 对象