Multiple Multi Select Values as One Object in VueJS?

Question

I am trying to save the values of multiple multi selects as one object ...

Here is what I am trying to do. I have 3 select boxes and am using the ChosenJS library for better ui.

All 3 multi-selects are using the same model (should this change?)

HTML

<div id="app">
    <select multiple v-chosen v-model="choices" name="filters1" id="filters1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>

    <select multiple v-chosen v-model="choices" name="filters2" id="filters2">
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>

    <select multiple v-chosen v-model="choices" name="filters3" id="filters3">
        <option value="7">Option 7</option>
        <option value="8">Option 8</option>
        <option value="9">Option 9</option>
    </select>
    <pre>
        Selected Options: {{choices}}
    </pre>
</div>

JS

Vue.directive('chosen', {
    twoWay: true,
    bind: function () {
        return this.vm.$nextTick((function (_this) {
            return function () {
                return $(_this.el).chosen({
                    inherit_select_classes: false,
                    width: '100%'
                }).change(function (ev) {
                    var i, len, option, ref, values;
                    if (_this.el.hasAttribute('multiple')) {
                        values = [];
                        ref = _this.el.selectedOptions;
                        for (i = 0, len = ref.length; i < len; i++) {
                            option = ref[i];
                            values.push(option.value);
                        }
                        console.log(values);

                        return _this.set(values);
                    } else {
                        return _this.set(_this.el.value);
                    }
                });
            };
        })(this));
    },
    update: function (nv, ov) {
        return $(this.el).trigger('chosen:updated');
    }
});

var app = new Vue({
    el:'#app',
    data: {
        choices: []
    }
})

My expected outcome would be:

Selected Options: ['2','3','6','8']

Is this possible? I created a fiddle to show where I am at.

http://jsfiddle.net/tyLa562h/3/

tony19 · Accepted Answer · 2022-07-16 00:01:11Z

2

No, you can't. Only radio buttons and checkboxes can have same model. So, here what you can do it by using a computed option: (choice1, choice2, choice3 are all three different model)

computed: {
  allChoices: function() {
    return this.choice1 + this.choice2 + this.choice3; // return how you want
  }
}

You can even use getter/setter method if you want.

edited Jul 16, 2022 at 0:01

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 3, 2018 at 20:16

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple Multi Select Values as One Object in VueJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related