vuetable-2 中的 Vue-multiselect v-model="value[?]"答案

【问题标题】：Vue-multiselect v-model="value[?]" in vuetable-2vuetable-2 中的 Vue-multiselect v-model="value[?]"
【发布时间】：2019-02-04 04:36:36
【问题描述】：

我正在为我的桌子使用 vuetable-2。在一列中，我需要多选，所以我使用 Vue-multiselect。问题是，Vue-multiselect 使用 v-model="value" 所以当我在一行中选择某些内容时，所有其他行都会使用相同的选择进行更新。

如果这是用于渲染表格的 forach 循环，我会使用 v-model="value[row.id]"，但在 vuetable-2 中我不知道如何访问我的表格行的 id。我试过：v-model="value[id]"、v-model="value[data.id]"、v-model="value[rowData.id]"，但似乎没有任何效果（是的，在我的数据，每个条目都有自己的 id)。

<template>
  <div>
    <filter-bar></filter-bar>
    <vuetable ref="vuetable"
              api-url="api/product-changes"
              :fields="fields"
              pagination-path=""
              @vuetable:pagination-data="onPaginationData"
              :per-page="3"
              :sort-order="sortOrder"
              :append-params="moreParams"
    >
      <template slot="multiselect" slot-scope="props">
        <multi-select :options="options"
                      v-model="value" // here is the problem
                      track-by="id"
                      label="name"
                      :multiple="true"
        ></multi-select>
      </template>
    </vuetable>
    <div class="vuetable-pagination ui basic segment grid">
      <vuetable-pagination-info ref="paginationInfo"
      ></vuetable-pagination-info>
      <vuetable-pagination ref="pagination"
                           @vuetable-pagination:change-page="onChangePage"
      ></vuetable-pagination>
    </div>
  </div>
</template>

picture of my table and multiselect options

【问题讨论】：

你能提供一些代码来帮助我思考你的问题的解决方案
添加了模板，如果需要我可以添加脚本（它是标准的 vuetable-2 实现）。
你可以试试v-model="value[index]"
试过了，没有变化，它仍然填充所有其他多选。在 devtools 中出现错误：“属性或方法“索引”未在实例上定义，但在渲染期间被引用。”
好的，在 v-for 中很容易设置，如果您阅读文档但直接使用正确的索引填充多选，您可以在方法中获取索引，对不起，我不知道该怎么做，我阅读了所有文档。

标签： vue.js vuejs2 vue-component multi-select vue-tables-2

【解决方案1】：

找到了，

v-model="value[props.rowData.id]"

似乎工作正常。

【讨论】：

【解决方案2】：

在我的情况下不使用

track-by="id"
label="name"

这样对我来说很好用：

        <multiselect
              v-model="rowData.id"
              :options="options"
              optionsLimit="2000"
              placeholder=""
              max="3"
              maxHeight="600"
              :selected.sync="selected"
              :show-labels="false"
              :searchable="true"
              :allow-empty="false"
              :multiple="true"
              :preserve-search="true"
              :preselect-first="false"
              >

并访问 rowData.id 所以 rowData 必须是一列，如果 rowData 是一个数组，那么您可以通过指定这样的列来访问您的 id 行数据[索引].id

【讨论】：