VueJS中的多个多选值作为一个对象？

Posted 2023-02-22

【中文标题】VueJS中的多个多选值作为一个对象？

【英文标题】：Multiple Multi Select Values as One Object in VueJS?

【发布时间】：2018-08-11 19:35:00

【问题描述】：

我正在尝试将多个多选的值保存为一个对象...

这就是我想要做的。我有 3 个选择框，并且正在使用 ChosenJS 库来获得更好的用户界面。

所有 3 个多选都使用相同的模型（应该更改吗？）

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: []
    
)

我的预期结果是：

选择的选项：['2','3','6','8']

这可能吗？ 我创建了一个小提琴来显示我在哪里。

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

【参考方案1】：

不，你不能。只有单选按钮和复选框可以具有相同的模型。所以，在这里你可以通过使用computed 选项来做到这一点：（choice1、choice2、choice3 都是三个不同的model）

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

如果你愿意，你甚至可以使用getter/setter 方法。