赏金7天后到期。此问题的答案有资格获得+50声誉奖励。学员正在从信誉良好的来源寻求答案**:
我想用vue multiselect复制jquery功能
您好,我不知道我试图通过更改其数据并自动加载来实现特定组件的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>
暂无答案!
目前还没有任何答案,快来回答吧!