vue multiselect 1.1.4, выберите значение по id

Я добавил компонент множественного выбора, который выглядит так

Просмотр

<multiselect
  :options="books"
  :selected="selectedBook"
  :show-labels="false"
  placeholder="Choose your book"
  label="name">
  <span slot="noResult">No books were found</span>
</multiselect>

Скрипт

<script>
  export default {
    data() {
      return {
        books: [],
        selectedBook: null,
      }
    },
    created() {
      this.getBooks();
      this.getFav();
    },
    methods: {
      getBooks() {
        this.$http
        .get('/books/')
        .then(
          function(response) {
            this.books = response.json();
          }
        );
      },
      getFav() {
        this.$http
        .get('/fav/')
        .then(
          function(response) {
            var fav = response.json();
            this.selectedBook = fav.id;
          }
        );
      }
    }
  }
</script>

Ответ

[{"id":1,"name":"ABC"},{"id":2,"name":"QWE"}]

И у меня вопрос, как я могу установить выбранную книгу по идентификатору. когда я устанавливаю так, то на входе отображается идентификатор, но мне нужно название книги.


vue.js vue-component
person b00sted 'snail'    schedule 10.01.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Используйте 1_

<multiselect
  ...
  track-by="id"
  label="name"
  ...
>

ref: https://vue-multiselect.js.org/#sub-single-select-object

person CodinCat    schedule 10.01.2017
comment
Привет, мой options также поступает из api, но после ввода track-by="id" он показывает следующую ошибку: Property or method "id" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property - person Saviah Kao; 09.10.2019