vue multiselect 1.1.4，按id选择值 [英] vue multiselect 1.1.4, select value by id

问题描述

我添加了如下所示的多选组件

i added multiselect component which looks like this

查看

<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，但我想要书名.

And my question is, how can i set selected book by id. when i set like this, then in input shows id, but i want the book name.

推荐答案

Use track-by

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

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

这篇关于vue multiselect 1.1.4，按id选择值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！