# Example - Table with Editable Rows. Possible to have mutliselect ( dropdown list)

**URL:** <https://forum.klai.studio/t/example-table-with-editable-rows-possible-to-have-mutliselect-dropdown-list/83>\
**Category:** Support\
**Created:** [July 3, 2020, 2:23am UTC](https://forum.klai.studio/t/example-table-with-editable-rows-possible-to-have-mutliselect-dropdown-list/83 "2020-07-03T02:23:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![LeongMengFoo](https://forum.klai.studio/letter_avatar_proxy/v4/letter/l/a9adbd/32.png) [@LeongMengFoo](https://forum.klai.studio/u/LeongMengFoo)\
**Post date:** [July 3, 2020, 2:23am UTC](https://forum.klai.studio/t/example-table-with-editable-rows-possible-to-have-mutliselect-dropdown-list/83/1 "2020-07-03T02:23:35Z")

</div>

Great stuff. Is it possible to have multiselect , other than plain data entry ?

 ![image](https://forum.fmbetterforms.com/uploads/default/original/1X/4727e9ca4e8190c88b2e6ab9f24a0658393144cb.png)

---

<div class="post-metadata">

**Author:** ![delfs](https://forum.klai.studio/user_avatar/forum.klai.studio/delfs/32/411_2.png) [@delfs](https://forum.klai.studio/u/delfs)\
**Post date:** [September 16, 2020, 11:29am UTC](https://forum.klai.studio/t/example-table-with-editable-rows-possible-to-have-mutliselect-dropdown-list/83/2 "2020-09-16T11:29:58Z")

</div>

Late to respond to this,

Since you can have slots in tables, you can basically put anything you want in there.

What type of element would you ideally like to have?

---

<div class="post-metadata">

**Author:** ![quarfie](https://forum.klai.studio/user_avatar/forum.klai.studio/quarfie/32/138_2.png) [@quarfie](https://forum.klai.studio/u/quarfie)\
**Post date:** [July 17, 2021, 9:43pm UTC](https://forum.klai.studio/t/example-table-with-editable-rows-possible-to-have-mutliselect-dropdown-list/83/3 "2021-07-17T21:43:45Z")

</div>

I would also like to know how to insert a vueMultiSelect into a table slot. Did you solve this @LeongMengFoo ?

---

<div class="post-metadata">

**Author:** ![quarfie](https://forum.klai.studio/user_avatar/forum.klai.studio/quarfie/32/138_2.png) [@quarfie](https://forum.klai.studio/u/quarfie)\
**Post date:** [July 19, 2021, 11:19pm UTC](https://forum.klai.studio/t/example-table-with-editable-rows-possible-to-have-mutliselect-dropdown-list/83/4 "2021-07-19T23:19:39Z")

</div>

So it looks like most of the examples on [vue-multiselect.js.org](http://vue-multiselect.js.org) will just work by adding the html only and referencing the correct point in the model, but I’m trying to implement the “Tagging” example.

```auto
<multiselect v-model="row.groups" tag-placeholder="Add this group" placeholder="Search or add a group" label="name" track-by="id" :options="model.groups" :multiple="true" :taggable="true" @tag="addTag"></multiselect>

```

The console complains that it cannot find variable “addTag”.

The example includes code to add the addTag method, but I’m not sure where to put it:

```auto
methods: {
    addTag (newTag) {
      const tag = {
        name: newTag,
        code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
      }
      this.options.push(tag)
      this.value.push(tag)
    }
  }

```

…and then the next challenge will be, how do I run a utility hook whenever a tag is added or removed?

---

<div class="post-metadata">

**Author:** ![delfs](https://forum.klai.studio/user_avatar/forum.klai.studio/delfs/32/411_2.png) [@delfs](https://forum.klai.studio/u/delfs)\
**Post date:** [July 20, 2021, 1:52pm UTC](https://forum.klai.studio/t/example-table-with-editable-rows-possible-to-have-mutliselect-dropdown-list/83/5 "2021-07-20T13:52:43Z")

</div>

The goal of BF is that the interface between raw HTML / Vue is easy.  
`namedAction` is a function that is available nearly anywhere.

Check docs for events, [Vue-Multiselect | Vue Select Library](https://vue-multiselect.js.org/#sub-events)

For example the `input` event fires when the value changes  
so, it would be something like:

```auto
<multiselect v-model="row.groups" track-by="id" :options="model.groups" :multiple="true" :taggable="true" @input="function(value, id){namedAction('stuffChanged', {val: value, theId:id } ')}" ></multiselect>

```

Where in the named action you can get those params via  
`action.options.val and action.options.theId`

HTH

---

<div class="post-metadata">

**Author:** ![quarfie](https://forum.klai.studio/user_avatar/forum.klai.studio/quarfie/32/138_2.png) [@quarfie](https://forum.klai.studio/u/quarfie)\
**Post date:** [July 20, 2021, 2:11pm UTC](https://forum.klai.studio/t/example-table-with-editable-rows-possible-to-have-mutliselect-dropdown-list/83/6 "2021-07-20T14:11:38Z")

</div>

Thanks! That’ll solve the second part, but I’m not sure what to do about the addTag method that isn’t recognized now…

---

<div class="post-metadata">

**Author:** ![quarfie](https://forum.klai.studio/user_avatar/forum.klai.studio/quarfie/32/138_2.png) [@quarfie](https://forum.klai.studio/u/quarfie)\
**Post date:** [July 20, 2021, 8:25pm UTC](https://forum.klai.studio/t/example-table-with-editable-rows-possible-to-have-mutliselect-dropdown-list/83/7 "2021-07-20T20:25:17Z")

</div>

SOLVED!

I did not understand the purpose of the addTag method and actually I do not need “tagging” in this implementation.

When making changes in table rows, the model is not updated, so you need to use named actions to update the model.

I ended up using the Select and Remove events to call named actions specific to adding and removing entries, but the Input method can be used if you care more about the end state selection.