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

Merge pull request #3048 from Xotic750/add_select_examples

Browse source 
Add select examples from the docs for rework of the select component
This commit is contained in:
Aresn 2018-02-26 17:10:44 +08:00 • committed by GitHub
commit 1b639c0a19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 618 additions and 245 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

839
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="model1"
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="model2"
size="small"
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="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" v-model="model13"
filterable filterable
remote remote
clearable
: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> >
</Select> <i-option
</Col> v-for="(option, index) in options1"
<Col span="12"> :value="option.value"
<Select :key="index"
>{{option.label}}</i-option>
</i-select>
</i-col>
<i-col span="12">
<i-select
v-model="model14" v-model="model14"
multiple multiple
filterable filterable
remote remote
clearable
: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> <i-option
</Select> v-for="(option, index) in options2"
</Col> :value="option.value"
</Row> :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>