JSFiddle - React, Tailwind, and code Playground

by duckduck0054

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="BotId">
    <el-input v-model="formInline.botId" placeholder="BotId"></el-input>
  </el-form-item>
  <el-form-item label="BotTpCd">
    <el-select v-model="formInline.botTpCd" placeholder="BotTpCd">
      <el-option label="INT" value="INT"></el-option>
      <el-option label="EXT" value="EXT"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">Search</el-button>
  </el-form-item>
</el-form>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

JavaScript

var Main = {
    data() {
      return {
        formInline: {
          botId: '',
          botTpCd: ''
        }
      }
    },
    methods: {
      onSubmit() {
        alert("botId ::" + this.formInline.botId);
        alert("botId ::" + this.formInline.botTpCd);
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')