VueJS 中的多个 Select 值作为一个对象?
Multiple Multi Select Values as One Object in VueJS?
我正在尝试将多个 multi select 的值保存为一个对象...
这就是我想要做的。我有 3 个 select 盒子并且正在使用 ChosenJS 库以获得更好的 ui.
所有 3 个 multi-select 都使用相同的模型(这应该改变吗?)
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']
这可能吗?
我创建了一个 fiddle 来显示我所在的位置。
不,你不能。只有单选按钮和复选框可以具有相同的模型。所以,在这里你可以通过使用 computed
选项来做到这一点:(choice1、choice2、choice3 都是三个不同的 model
)
computed: {
allChoices: function() {
return this.choice1 + this.choice2 + this.choice3; // return how you want
}
}
如果需要,您甚至可以使用 getter/setter 方法。
我正在尝试将多个 multi select 的值保存为一个对象...
这就是我想要做的。我有 3 个 select 盒子并且正在使用 ChosenJS 库以获得更好的 ui.
所有 3 个 multi-select 都使用相同的模型(这应该改变吗?)
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']
这可能吗? 我创建了一个 fiddle 来显示我所在的位置。
不,你不能。只有单选按钮和复选框可以具有相同的模型。所以,在这里你可以通过使用 computed
选项来做到这一点:(choice1、choice2、choice3 都是三个不同的 model
)
computed: {
allChoices: function() {
return this.choice1 + this.choice2 + this.choice3; // return how you want
}
}
如果需要,您甚至可以使用 getter/setter 方法。