vue multiselect 1.1.4，按id选择值

Question

我添加了看起来像这样的多选组件

看法

<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"}]

我的问题是，如何通过 id 设置选定的书籍。当我这样设置时，然后在输入中显示 id，但我想要书名。

Answer 1

用 track-by

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

参考：https : //vue-multiselect.js.org/#sub-single-select-object