如何使用 vue-multiselect 进行动态多重下拉 [英] How to have dynamic multiple dropdown with vue-multiselect
问题描述
我不知道通过更改数据并自动加载特定组件的 vue 是否可以实现我的目标
以下是我的期望(在 jquery 中尝试过)
var data = {country:{type:'dropdown',values:['india','usa']},money:{类型:'输入'，占位符:'输入金额'}，印度:['班加罗尔']，美国:['硅谷']}函数 getDropTemplate(dropDownList){var dropDownStr = '';for(var i = 0; i < dropDownList.length; i++){dropDownStr += `<option value="${dropDownList[i]}">${dropDownList[i]}</option>`}return `<select class="mainCountry">${dropDownStr}</select>`;}函数 getInputTemplate(inputObj){return `<input type="text" placeholder="${inputObj.placeholder}"/>`}$(函数(){$('#dropdown').on('change',function(){var 值 = $(this).val(), 模板 = '';if(data[value].type == '下拉菜单'){模板 += getDropTemplate(data[value].values)}别的{模板 += getInputTemplate(data[value])}$('#selectedResults').html(模板);});$(document).on('change','.mainCountry',function(){var 结果 = 数据[$(this).val()]$('#subResults').html(getDropTemplate(result));});});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select id="下拉列表"><option value="">--select--</option><option value="money">Money</option><option value="country">Country</option></选择><div id="selectedResults"><div id="subResults">
从上面的代码片段中，您可以通过选择 country ->印度 ->班加罗尔 或 country ->美国 ->硅谷
我想用 vue-multiselect
以下是我在 vue 中尝试过的
var app = new Vue({el: '#app',组件:{ 多选:window.VueMultiselect.default },数据 () {返回 {价值: []，//data:{country:{type:'dropdown',values:['india','usa']},money:{type:'input',placeholder:'enter amount'},india:['Bengaluru'],美国:['硅谷']}选项:[{name:'money'},{name:'country'}]}}}) <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><;/脚本><script src="https://unpkg.com/vue-multiselect@2.1.0"></script><link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"><script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script><div id="应用程序"><多选v-model="值"跟踪= =名称":options="选项"标签=名称":multiple="假":taggable="假"></多选>您可以根据 category.name 有条件地渲染 input 或 multiselects>.
例如，当 category.name 是 Money 时，显示 :
</模板>否则，当是Country时，显示两个multiselect(一个用于国家选择，另一个用于区域):
</多选><multiselect v-if="country &&国家.地区"占位符=选择一个区域"v-model=区域":options="country.regions";:multiple="false";:taggable="false"></多选></模板>国家multiselect填充有countryOptions[](如下所示)，每个都有regions[]，用于填充区域 multiselect.这可确保显示的地区仅适用于所选国家/地区.
new Vue({数据() {返回 {类别:空，国家:空，地区:空，金额:空，categoryOptions: [{ name: 'Money' }, { name: 'Country' }],国家选项:[{name: '美国',地区:['硅谷'，'中西部']，},{name: '印度',地区:['班加罗尔']，}],}},})Hi i don't know whether what i'm trying to achieve is possible or not with vue for a particular component by changing its data and loading automatically
Below is my expection(tried in jquery)
var data = {country:{type:'dropdown',values:['india','usa']},money:{type:'input',placeholder:'enter amount'},india:['Bengaluru'],usa:['Silicon Valley']}
function getDropTemplate(dropDownList){
var dropDownStr = '';
for(var i = 0; i < dropDownList.length; i++){
dropDownStr += `<option value="${dropDownList[i]}">${dropDownList[i]}</option>`
}
return `<select class="mainCountry">${dropDownStr}</select>`;
}
function getInputTemplate(inputObj){
return `<input type="text" placeholder="${inputObj.placeholder}"/>`
}
$(function(){
$('#dropdown').on('change',function(){
var value = $(this).val(), template = '';
if(data[value].type == 'dropdown'){
template += getDropTemplate(data[value].values)
}else{
template += getInputTemplate(data[value])
}
$('#selectedResults').html(template);
});
$(document).on('change','.mainCountry',function(){
var result = data[$(this).val()]
$('#subResults').html(getDropTemplate(result));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown">
<option value="">--select--</option>
<option value="money">Money</option>
<option value="country">Country</option>
</select>
<div id="selectedResults">
</div>
<div id="subResults">
</div>
From above snippet you can observe that by selecting country -> india -> Bengaluru or country -> usa -> Silicon Valley
I want to replicate the same thing with vue-multiselect
below is what i have tried in vue
var app = new Vue({
el: '#app',
components: { Multiselect: window.VueMultiselect.default },
data () {
return {
value: [],
//data:{country:{type:'dropdown',values:['india','usa']},money:{type:'input',placeholder:'enter amount'},india:['Bengaluru'],usa:['Silicon Valley']}
options:[{name:'money'},{name:'country'}]
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<div id="app">
<multiselect
v-model="value"
track-by="name"
:options="options"
label="name"
:multiple="false"
:taggable="false"
></multiselect>
</div>
You could conditionally render the input or multiselects based on category.name.
For instance, when category.name is Money, show the <input>:
<template v-if="category && category.name === 'Money'">
<input type="text" v-model="moneyAmount" placeholder="Enter amount">
</template>
Otherwise, when it's Country, show two multiselects (one for country selection, and the other for region):
<template v-else-if="category && category.name === 'Country'">
<multiselect
placeholder="Select a country"
v-model="country"
track-by="name"
:options="countryOptions"
label="name"
:multiple="false"
:taggable="false">
</multiselect>
<multiselect v-if="country && country.regions"
placeholder="Select a region"
v-model="region"
:options="country.regions"
:multiple="false"
:taggable="false">
</multiselect>
</template>
The country multiselect is populated with countryOptions[] (shown below), each of which has regions[], which is used to populate the region multiselect. This ensures the displayed regions are only applicable to the selected country.
new Vue({
data() {
return {
category: null,
country: null,
region: null,
moneyAmount: null,
categoryOptions: [{ name: 'Money' }, { name: 'Country' }],
countryOptions: [
{
name: 'USA',
regions: ['Silicon Valley', 'Midwest'],
},
{
name: 'India',
regions: ['Bengaluru'],
}
],
}
},
})
这篇关于如何使用 vue-multiselect 进行动态多重下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
