Vue-multiselect v-model="value[?]" in vuetable-2

Question

I'm using vuetable-2 for my table. In one column, I need to have multiple select, so I'm using Vue-multiselect. The problem is, Vue-multiselect uses v-model="value" so when i select something in one row, all other rows are updated with the same selection.

If this was forach loop for rendering tables, i would use v-model="value[row.id]", but in vuetable-2 i don't know how to access my table row's id. I tried: v-model="value[id]", v-model="value[data.id]", v-model="value[rowData.id]", and nothing seems to work (and yes, in my data, every entry has its own 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

Could you provide some Code would help me to think About a solution for your problem — niclas_4, Aug 29 '18 at 11:48
Added template, I can add script if needed (it is standard vuetable-2 implementation). — Koka, Aug 29 '18 at 12:10
Tried it, no changes, it still populates all other multiselects. And in devtools I got an error: "Property or method "index" is not defined on the instance but referenced during render." — Koka, Aug 29 '18 at 12:49
Okay, well in a v-for it would be easy to set up also you can get the index in Methods if you read the docs but direcly populating the multiselect with the correct index, i am sorry i dont know how to do that i readed all the docs. — niclas_4, Aug 29 '18 at 12:53

score 0 · Answer 1 · answered Aug 29 '18 at 14:43

0

Found it,

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

seems to be working.

answered Aug 29 '18 at 14:43

Koka

141
1
7

score 0 · Answer 2 · answered Jan 27 '21 at 10:42

in my case without using

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

it is working fine for me like this :

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

and to access rowData.id so rowData must be one column and if rowData is an array so you can access your ids by specifying the column like this rowData[index].id

Vue-multiselect v-model="value[?]" in vuetable-2

2 Answers2