Как использовать Axios с Vue-Multiselect? - PullRequest
Новая
       22

Как использовать Axios с Vue-Multiselect?

0 голосов
/ 12 февраля 2019

Новое в использовании Vue-Multiselect.Я использую axios для выполнения запроса GET от заполнителя JSON для тестирования.

Как мне получить заголовок и идентификатор публикации, которые будут отображаться в моем раскрывающемся списке?

Прямо сейчас, я просто отображаю [Object Object] - [title] в моем окне выбора.

enter image description here

    <!-- 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 Ответ

0 голосов
/ 12 февраля 2019

исправить: 

  postWithTitle(option) {
     return `${option.id} - [${option.title}]`;
  }

объяснение:

я увидел, что когда я просто console.log вшел в postWithTitle функцию:

пользовательский атрибут custom-label принимал обратный вызов, который принимает только один аргумент.этим аргументом был весь объект option - одна запись вашего массива posts.

...