[Vuejs]-Vue multiselect not being selected when tracking by _id in edit mode

by

0👍

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>

Leave a comment