javascript - 如何使用 vue-multiselect 进行动态多个下拉菜单
问题描述
嗨,我不知道通过更改数据和自动加载特定组件的 vue 是否可以实现我想要实现的目标
以下是我的期望(在 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>
从上面的代码片段中,您可以通过选择country -> india -> Bengaluru
或观察到country -> usa -> Silicon Valley
我想复制同样的东西 vue-multiselect
以下是我在 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>
解决方案
您可以有条件地渲染input
ormultiselects
基于category.name
.
例如,当category.name
is时Money
,显示<input>
:
<template v-if="category && category.name === 'Money'">
<input type="text" v-model="moneyAmount" placeholder="Enter amount">
</template>
否则,当它是 时Country
,显示两个multiselect
s(一个用于国家选择,另一个用于区域):
<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>
该国家/地区multiselect
填充有countryOptions[]
(如下所示),每个都有regions[]
,用于填充区域multiselect
。这可确保显示的区域仅适用于所选国家/地区。
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'],
}
],
}
},
})
推荐阅读
- android - notificationBuilder.setSound() 到铃声不起作用
- go - Hyperledger Fabric 链码在执行期间面临错误
- tomcat - Tomcat 8如何实现热部署?
- c# - 在pdfsharp中使用字体Times New Roman粗体时出错
- c# - Caliburn Micro Conductor.Collection.AllActive 不工作
- node.js - 在 s3 amazon 问题上将图像直接上传到存储桶
- ios - 推送通知 - 来自 Today Extension - iOS
- python - 对象之间通配符匹配的简洁方法?
- mysql - 此代码显示用户列表 bt 如何将其转换为 Nodejs 和 mysql 中的 MVC 模型?
- angularjs - 根据条件angularjs显示视图输入字段