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

Support
1

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

image
image976×628 21.4 KB

2

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?

3

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

4

So it looks like most of the examples on 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.

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

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?

5

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

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

<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

6

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

7

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.