Element: input focus for mixin input

by Theara Yuom

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="Approved by">
    <el-input v-model="formInline.user" name="user" ref="user" placeholder="Approved by">
    	 <el-select v-model="formInline.region" slot="prepend" @change="selectChange" style="width: 150px">
      <el-option label="Zone one" value="shanghai"></el-option>
      <el-option label="Zone two" value="beijing"></el-option>
    </el-select>
    </el-input>
  </el-form-item>

	<el-form-item>
    <el-button type="primary" @click="onSubmit">Query</el-button>
  </el-form-item>
</el-form>
</div>

SCSS

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

Babel + JSX

var Main = {
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
			selectChange(val){
				document.querySelector('input[name=user]').focus();
			}
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')