vue.js - 在编辑模式下通过_id跟踪时未选择vue多选

Question

我正在使用 Vue 多选，模型作为类别，选项作为类别列表

categories: ["5ddc465a46a56b19d17e9a15"],
categoriesList: [ { "_id": "5ddc465a46a56b19d17e9a15", "name": "Business Card", } ]


multiselect v-model="categories"
class="form-control"
tag-placeholder="Add this as new tag"
placeholder="Search or add a tag"
label="name"
track-by="_id"
:options="categoriesList"
value-field="_id"
text-field="_id"
:multiple="true"
/>

在编辑模式下，我的模型可能有以下数据，这些数据应该导致从与模型的 _id 匹配存在的 categoriesList 中选择选项。

任何一个

类别：[{_id:"5ddc465a46a56b19d17e9a15"}],

或者

类别：[“5ddc465a46a56b19d17e9a15”]，

https://jsfiddle.net/1amyk9u4/

Answer 1

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
    categories: [],
    categoriesList: [{
      "_id": "5ddc465a46a56b19d17e9a15",
      "name": "Business Card",
      "updatedBy": "5db95c3c61d80ebe8ba560af",
      "createdBy": "5db95c3c61d80ebe8ba560af",
      "isActive": true,
      "isGlobal": true,
      "logo": "Categories/5ddc465a46a56b19d17e9a15",
      "updatedAt": "2019-12-01 04:29:36",
      "createdAt": "2019-11-25 21:23:38"
    }, {
      "_id": "5ddc465a46a56b19d17e9a16",
      "name": "Credit Card",
      "updatedBy": "5db95c3c61d80ebe8ba560af",
      "createdBy": "5db95c3c61d80ebe8ba560af",
      "isActive": true,
      "isGlobal": true,
      "logo": "Categories/5ddc465a46a56b19d17e9a15",
      "updatedAt": "2019-12-01 04:29:36",
      "createdAt": "2019-11-25 21:23:38"
    }]
  },
  created() {
    this.categories.push(this.categoriesList[0]);
  }
}).$mount('#app')

* {
  font-family: 'Lato', 'Avenir', sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<div id="app">
  <multiselect v-model="categories" class="form-control" v-model="categories" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="_id" :options="categoriesList" :multiple="true" :taggable="true">
  </multiselect>
  <pre>{{ categories }}</pre>
</div>