JSFiddle - React, Tailwind, and code Playground

by Kris

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
    <i-select v-model="model7"  @on-change="changeChannel" 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>
</div>

SCSS

@import url("//unpkg.com/iview/dist/styles/iview.css");
#app{padding: 32px;}

Babel + JSX

var Main = {
    		methods: {
           changeChannel(value) {
                console.log(value)
               
            },
        },
        data () {
            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'
                    }
                ],
                model7: ''
            }
        }
    }

var Component = Vue.extend(Main)
new...