drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add select examples from the docs for rework of the select component

Browse source
This commit is contained in:
Graham Fairweather 2018-02-26 08:35:42 +01:00
parent 899ad697b0
commit 59aac107d0
1 changed files with 618 additions and 245 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

863
examples/routers/select.vue
View file

@ -1,296 +1,669 @@
<!--<template>--> <!--<template>-->
<!--<div>--> <!--<div>-->
<!--{{ model10 }} - --> <!--{{ model10 }} - -->
<!--{{ model11 }}--> <!--{{ model11 }}-->
<!--<Select v-model="model10" style="width:260px">--> <!--<Select v-model="model10" style="width:260px">-->
<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>--> <!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->
<!--</Select>--> <!--</Select>-->
<!--<Select v-model="model11" style="width:260px">--> <!--<Select v-model="model11" style="width:260px">-->
<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>--> <!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->
<!--</Select>--> <!--</Select>-->
<!--</div>--> <!--</div>-->
<!--</template>--> <!--</template>-->
<!--<script>--> <!--<script>-->
<!--export default {--> <!--export default {-->
<!--data () {--> <!--data () {-->
<!--return {--> <!--return {-->
<!--cityList: [],--> <!--cityList: [],-->
<!--model10: '',--> <!--model10: '',-->
<!--model11: '',--> <!--model11: '',-->
<!--model12: ''--> <!--model12: ''-->
<!--}--> <!--}-->
<!--},--> <!--},-->
<!--mounted () {--> <!--mounted () {-->
<!--setTimeout(() => {--> <!--setTimeout(() => {-->
<!--this.cityList = [--> <!--this.cityList = [-->
<!--{--> <!--{-->
<!--value: 'beijing',--> <!--value: 'beijing',-->
<!--label: '北京市'--> <!--label: '北京市'-->
<!--},--> <!--},-->
<!--{--> <!--{-->
<!--value: 'shanghai',--> <!--value: 'shanghai',-->
<!--label: '上海市'--> <!--label: '上海市'-->
<!--},--> <!--},-->
<!--{--> <!--{-->
<!--value: 'shenzhen',--> <!--value: 'shenzhen',-->
<!--label: '深圳市'--> <!--label: '深圳市'-->
<!--},--> <!--},-->
<!--{--> <!--{-->
<!--value: 'hangzhou',--> <!--value: 'hangzhou',-->
<!--label: '杭州市'--> <!--label: '杭州市'-->
<!--},--> <!--},-->
<!--{--> <!--{-->
<!--value: 'nanjing',--> <!--value: 'nanjing',-->
<!--label: '南京市'--> <!--label: '南京市'-->
<!--},--> <!--},-->
<!--{--> <!--{-->
<!--value: 'chongqing',--> <!--value: 'chongqing',-->
<!--label: '重庆市'--> <!--label: '重庆市'-->
<!--}--> <!--}-->
<!--];--> <!--];-->
<!--}, 1000);--> <!--}, 1000);-->
<!--}--> <!--}-->
<!--}--> <!--}-->
<!--</script>--> <!--</script>-->
<!--<template>--> <!--<template>-->
<!--<div>--> <!--<div>-->
<!--<Select v-model="value">--> <!--<Select v-model="value">-->
<!--<Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option>--> <!--<Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option>-->
<!--</Select>--> <!--</Select>-->
<!--<Button @click="setList">set list</Button>--> <!--<Button @click="setList">set list</Button>-->
<!--</div>--> <!--</div>-->
<!--</template>--> <!--</template>-->
<!--<script>--> <!--<script>-->
<!--export default {--> <!--export default {-->
<!--data () {--> <!--data () {-->
<!--return {--> <!--return {-->
<!--value: '',--> <!--value: '',-->
<!--list: []--> <!--list: []-->
<!--}--> <!--}-->
<!--},--> <!--},-->
<!--methods: {--> <!--methods: {-->
<!--setList () {--> <!--setList () {-->
<!--let list = [];--> <!--let list = [];-->
<!--for (let i = 0; i < 400; i++) {--> <!--for (let i = 0; i < 400; i++) {-->
<!--list.push({--> <!--list.push({-->
<!--value: 'value' + i,--> <!--value: 'value' + i,-->
<!--label: 'label' + i--> <!--label: 'label' + i-->
<!--});--> <!--});-->
<!--}--> <!--}-->
<!--this.list = list;--> <!--this.list = list;-->
<!--}--> <!--}-->
<!--}--> <!--}-->
<!--}--> <!--}-->
<!--</script>--> <!--</script>-->
<!--<template>--> <!--<template>-->
<!--<div style="width: 400px;margin: 50px;">--> <!--<div style="width: 400px;margin: 50px;">-->
<!--<div>data: {{ model13 }}</div>--> <!--<div>data: {{ model13 }}</div>-->
<!--<Row>--> <!--<Row>-->
<!--<Col span="12" style="padding-right:10px">--> <!--<Col span="12" style="padding-right:10px">-->
<!--<Select--> <!--<Select-->
<!--size="small"--> <!--size="small"-->
<!--placeholder="提示提示"--> <!--placeholder="提示提示"-->
<!--v-model="model13"--> <!--v-model="model13"-->
<!--filterable--> <!--filterable-->
<!--remote--> <!--remote-->
<!--transfer--> <!--transfer-->
<!--:remote-method="remoteMethod1"--> <!--:remote-method="remoteMethod1"-->
<!--:loading="loading1">--> <!--:loading="loading1">-->
<!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>--> <!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>-->
<!--</Select>--> <!--</Select>-->
<!--</Col>--> <!--</Col>-->
<!--<Col span="12">--> <!--<Col span="12">-->
<!--<Select--> <!--<Select-->
<!--v-model="model14"--> <!--v-model="model14"-->
<!--multiple--> <!--multiple-->
<!--filterable--> <!--filterable-->
<!--remote--> <!--remote-->
<!--:remote-method="remoteMethod2"--> <!--:remote-method="remoteMethod2"-->
<!--:loading="loading2">--> <!--:loading="loading2">-->
<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>--> <!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
<!--</Select>--> <!--</Select>-->
<!--</Col>--> <!--</Col>-->
<!--</Row>--> <!--</Row>-->
<!--</div>--> <!--</div>-->
<!--</template>--> <!--</template>-->
<!--<script>--> <!--<script>-->
<!--export default {--> <!--export default {-->
<!--data () {--> <!--data () {-->
<!--return {--> <!--return {-->
<!--model13: '',--> <!--model13: '',-->
<!--loading1: false,--> <!--loading1: false,-->
<!--options1: [],--> <!--options1: [],-->
<!--model14: [],--> <!--model14: [],-->
<!--loading2: false,--> <!--loading2: false,-->
<!--options2: [],--> <!--options2: [],-->
<!--list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']--> <!--list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']-->
<!--}--> <!--}-->
<!--},--> <!--},-->
<!--methods: {--> <!--methods: {-->
<!--remoteMethod1 (query) {--> <!--remoteMethod1 (query) {-->
<!--if (query !== '') {--> <!--if (query !== '') {-->
<!--this.loading1 = true;--> <!--this.loading1 = true;-->
<!--setTimeout(() => {--> <!--setTimeout(() => {-->
<!--this.loading1 = false;--> <!--this.loading1 = false;-->
<!--const list = this.list.map(item => {--> <!--const list = this.list.map(item => {-->
<!--return {--> <!--return {-->
<!--value: item,--> <!--value: item,-->
<!--label: item--> <!--label: item-->
<!--};--> <!--};-->
<!--});--> <!--});-->
<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);--> <!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);--> <!--}, 200);-->
<!--} else {--> <!--} else {-->
<!--this.options1 = [];--> <!--this.options1 = [];-->
<!--}--> <!--}-->
<!--},--> <!--},-->
<!--remoteMethod2 (query) {--> <!--remoteMethod2 (query) {-->
<!--if (query !== '') {--> <!--if (query !== '') {-->
<!--this.loading2 = true;--> <!--this.loading2 = true;-->
<!--setTimeout(() => {--> <!--setTimeout(() => {-->
<!--this.loading2 = false;--> <!--this.loading2 = false;-->
<!--const list = this.list.map(item => {--> <!--const list = this.list.map(item => {-->
<!--return {--> <!--return {-->
<!--value: item,--> <!--value: item,-->
<!--label: item--> <!--label: item-->
<!--};--> <!--};-->
<!--});--> <!--});-->
<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);--> <!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);--> <!--}, 200);-->
<!--} else {--> <!--} else {-->
<!--this.options2 = [];--> <!--this.options2 = [];-->
<!--}--> <!--}-->
<!--}--> <!--}-->
<!--}--> <!--}-->
<!--}--> <!--}-->
<!--</script>--> <!--</script>-->
<!--<template>--> <!--<template>-->
<!--<div style="width: 300px">--> <!--<div style="width: 300px">-->
<!--<Select--> <!--<Select-->
<!--v-model="model14"--> <!--v-model="model14"-->
<!--multiple--> <!--multiple-->
<!--filterable--> <!--filterable-->
<!--remote--> <!--remote-->
<!--:remote-method="remoteMethod2"--> <!--:remote-method="remoteMethod2"-->
<!--:loading="loading2">--> <!--:loading="loading2">-->
<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>--> <!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
<!--</Select>--> <!--</Select>-->
<!--</div>--> <!--</div>-->
<!--</template>--> <!--</template>-->
<!--<script>--> <!--<script>-->
<!--export default {--> <!--export default {-->
<!--data () {--> <!--data () {-->
<!--return {--> <!--return {-->
<!--model13: '',--> <!--model13: '',-->
<!--loading1: false,--> <!--loading1: false,-->
<!--options1: [],--> <!--options1: [],-->
<!--model14: [],--> <!--model14: [],-->
<!--loading2: false,--> <!--loading2: false,-->
<!--options2: [],--> <!--options2: [],-->
<!--list: ['a', 'b', 'c']--> <!--list: ['a', 'b', 'c']-->
<!--}--> <!--}-->
<!--},--> <!--},-->
<!--methods: {--> <!--methods: {-->
<!--remoteMethod2 (query) {--> <!--remoteMethod2 (query) {-->
<!--if (query !== '') {--> <!--if (query !== '') {-->
<!--this.loading2 = true;--> <!--this.loading2 = true;-->
<!--setTimeout(() => {--> <!--setTimeout(() => {-->
<!--this.loading2 = false;--> <!--this.loading2 = false;-->
<!--const list = this.list.map(item => {--> <!--const list = this.list.map(item => {-->
<!--return {--> <!--return {-->
<!--value: item,--> <!--value: item,-->
<!--label: item--> <!--label: item-->
<!--};--> <!--};-->
<!--});--> <!--});-->
<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);--> <!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);--> <!--}, 200);-->
<!--} else {--> <!--} else {-->
<!--this.options2 = [];--> <!--this.options2 = [];-->
<!--}--> <!--}-->
<!--}--> <!--}-->
<!--}--> <!--}-->
<!--}--> <!--}-->
<!--</script>--> <!--</script>-->
<!--<template>-->
<!--<Row>-->
<!--<Col span="12" style="padding-right:10px">-->
<!--<Select-->
<!--v-model="model13"-->
<!--filterable-->
<!--remote-->
<!--:remote-method="remoteMethod1"-->
<!--:loading="loading1">-->
<!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>-->
<!--<Col span="12">-->
<!--<Select-->
<!--v-model="model14"-->
<!--multiple-->
<!--filterable-->
<!--remote-->
<!--:remote-method="remoteMethod2"-->
<!--:loading="loading2">-->
<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
<!--</Select>-->
<!--</Col>-->
<!--</Row>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--model13: '',-->
<!--loading1: false,-->
<!--options1: [],-->
<!--model14: [],-->
<!--loading2: false,-->
<!--options2: [],-->
<!--list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--remoteMethod1 (query) {-->
<!--if (query !== '') {-->
<!--this.loading1 = true;-->
<!--setTimeout(() => {-->
<!--this.loading1 = false;-->
<!--const list = this.list.map(item => {-->
<!--return {-->
<!--value: item,-->
<!--label: item-->
<!--};-->
<!--});-->
<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options1 = [];-->
<!--}-->
<!--},-->
<!--remoteMethod2 (query) {-->
<!--if (query !== '') {-->
<!--this.loading2 = true;-->
<!--setTimeout(() => {-->
<!--this.loading2 = false;-->
<!--const list = this.list.map(item => {-->
<!--return {-->
<!--value: item,-->
<!--label: item-->
<!--};-->
<!--});-->
<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
<!--}, 200);-->
<!--} else {-->
<!--this.options2 = [];-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<Row> <div id="app">
<Col span="12" style="padding-right:10px"> <input><br>
<Select <i-select
v-model="model13" v-model="model1"
filterable style="width:200px"
remote >
:remote-method="remoteMethod1" <i-option
:loading="loading1"> v-for="item in cityList"
<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option> :value="item.value"
</Select> :key="item.value"
</Col> >{{item.label}}</i-option>
<Col span="12"> </i-select>
<Select <br>
v-model="model14" <i-select
multiple v-model="model2"
filterable size="small"
remote style="width:100px"
:remote-method="remoteMethod2" >
:loading="loading2"> <i-option
<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option> v-for="item in cityList"
</Select> :value="item.value"
</Col> :key="item.value"
</Row> >{{item.label}}</i-option>
</i-select>
<i-select
v-model="model3"
style="width:100px"
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
<i-select
v-model="model4"
size="large"
style="width:100px"
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
<br>
<i-select
v-model="model5"
disabled
style="width:200px"
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
<i-select
v-model="model6"
style="width:200px"
>
<i-option value="beijing">New York</i-option>
<i-option value="shanghai" disabled>London</i-option>
<i-option value="shenzhen">Sydney</i-option>
</i-select>
<br>
<i-select
v-model="model8"
clearable
style="width:200px"
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
<br>
<i-select
v-model="model7"
style="width:200px"
>
<option-group label="Hot Cities">
<i-option
v-for="item in cityList1"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</option-group>
<option-group label="Other Cities">
<i-option
v-for="item in cityList2"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</option-group>
</i-select>
<br>
<i-select
v-model="model9"
style="width:200px"
>
<i-option value="New York" label="New York">
<span>New York</span>
<span style="float:right;color:#ccc">America</span>
</i-option>
<i-option value="London" label="London">
<span>London</span>
<span style="float:right;color:#ccc">U.K.</span>
</i-option>
<i-option value="Sydney" label="Sydney">
<span>Sydney</span>
<span style="float:right;color:#ccc">Australian</span>
</i-option>
</i-select>
<br>
<div>here</div>
<i-select
v-model="model10"
multiple
style="width:260px"
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
<br>
<row>
<i-col
span="12"
style="padding-right:10px"
>
<i-select
v-model="model11"
filterable
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
</i-col>
<i-col span="12">
<i-select
v-model="model12"
filterable
multiple
>
<i-option
v-for="item in cityList"
:value="item.value"
:key="item.value"
>{{item.label}}</i-option>
</i-select>
</i-col>
</row>
<br>
<row>
<i-col
span="12"
style="padding-right:10px"
>
<i-select
v-model="model13"
filterable
remote
clearable
:remote-method="remoteMethod1"
:loading="loading1"
>
<i-option
v-for="(option, index) in options1"
:value="option.value"
:key="index"
>{{option.label}}</i-option>
</i-select>
</i-col>
<i-col span="12">
<i-select
v-model="model14"
multiple
filterable
remote
clearable
:remote-method="remoteMethod2"
:loading="loading2">
<i-option
v-for="(option, index) in options2"
:value="option.value"
:key="index"
>{{option.label}}</i-option>
</i-select>
</i-col>
</row>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data(){
return { return {
cityList: [
{
value: 'New York',
label: 'New York',
},
{
value: 'London',
label: 'London',
},
{
value: 'Sydney',
label: 'Sydney',
},
{
value: 'Ottawa',
label: 'Ottawa',
},
{
value: 'Paris',
label: 'Paris',
},
{
value: 'Canberra',
label: 'Canberra',
},
],
cityList1: [
{
value: 'New York',
label: 'New York',
},
{
value: 'London',
label: 'London',
},
{
value: 'Sydney',
label: 'Sydney',
},
],
cityList2: [
{
value: 'Ottawa',
label: 'Ottawa',
},
{
value: 'Paris',
label: 'Paris',
},
{
value: 'Canberra',
label: 'Canberra',
},
],
model1: '',
model2: '',
model3: '',
model4: '',
model5: '',
model6: '',
model7: '',
model8: '',
model9: '',
model10: [],
model11: '',
model12: [],
model13: '', model13: '',
loading1: false, loading1: false,
options1: [], options1: [],
model14: [], model14: [],
loading2: false, loading2: false,
options2: [], options2: [],
list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'] list: [
} 'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'Florida',
'Georgia',
'Hawaii',
'Idaho',
'Illinois',
'Indiana',
'Iowa',
'Kansas',
'Kentucky',
'Louisiana',
'Maine',
'Maryland',
'Massachusetts',
'Michigan',
'Minnesota',
'Mississippi',
'Missouri',
'Montana',
'Nebraska',
'Nevada',
'New hampshire',
'New jersey',
'New mexico',
'New york',
'North carolina',
'North dakota',
'Ohio',
'Oklahoma',
'Oregon',
'Pennsylvania',
'Rhode island',
'South carolina',
'South dakota',
'Tennessee',
'Texas',
'Utah',
'Vermont',
'Virginia',
'Washington',
'West virginia',
'Wisconsin',
'Wyoming',
],
};
}, },
methods: { methods: {
remoteMethod1 (query) { remoteMethod1(query){
if (query !== '') { if (query !== '') {
this.loading1 = true; this.loading1 = true;
setTimeout(() => { setTimeout(() => {
this.loading1 = false; this.loading1 = false;
const list = this.list.map(item => {
return { const list = this.list.map(item => ({
value: item, value: item,
label: item label: item,
}; }));
});
this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1); this.options1 = list
}, 200); .filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
}, 1500);
} else { } else {
this.options1 = []; this.options1 = [];
} }
}, },
remoteMethod2 (query) { remoteMethod2(query){
if (query !== '') { if (query !== '') {
this.loading2 = true; this.loading2 = true;
setTimeout(() => { setTimeout(() => {
this.loading2 = false; this.loading2 = false;
const list = this.list.map(item => {
return { const list = this.list.map(item => ({
value: item, value: item,
label: item label: item,
}; }));
});
this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1); this.options2 = list
.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
}, 200); }, 200);
} else { } else {
this.options2 = []; this.options2 = [];
} }
} },
} },
} };
</script> </script>