在编辑模式下通过_id跟踪时未选择vue multiselect

2024-05-17 • 问答

我正在将Vue多项选择与模型作为类别，将选项作为CategoriesList

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匹配项的选项。

要么

类别：[{_id：“ 5ddc465a46a56b19d17e9a15”}]，

或

类别：[“ 5ddc465a46a56b19d17e9a15”]，

https://jsfiddle.net/1amyk9u4/

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","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>

在编辑模式下通过_id跟踪时未选择vue multiselect

lucifer0777777777777 回答：在编辑模式下通过_id跟踪时未选择vue multiselect

大家都在问