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

Posted 2023-03-11

【中文标题】在编辑模式下通过_id跟踪时未选择vue多选

【英文标题】：vue multiselect not being selected when tracking by _id in edit mode

【发布时间】：2019-12-03 20:12:17

【问题描述】：

我正在使用 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/

【参考方案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>

【讨论】：

感谢您的努力，我正在努力编辑更多内容，我的 this.categories 将是类别：["5ddc465a46a56b19d17e9a15","5ddc465a46a56b19d17e9a16"]