vue-weird-focus-key

test

by lxjwlt

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app"></div>

CSS

button:focus {
  outline: 1px solid blue;
}

.btn-wrap {
  overflow: hidden;
  border: 1px dotted #ddd;
  padding: 10px;
}

JavaScript

new Vue({
	el: '#app',
  render (createElement) {
  	return createElement('div', { class: 'btn-wrap' }, [
    	!this.inFirst ? createElement('button', {
      	on: {
        	click: this.prev
        },
        key: 'btn-prev'
      }, 'prev') : null,
      createElement('button', {
        style: {
          'float': 'right'
        },
        on: {
          click: this.noop
        },
        key: 'btn-cancel'
      }, 'cancel'),
      this.inEnd ? createElement('button', {
      	style: {
          'float': 'right'
        },
      	on: {
        	click: this.noop
        },
        key: 'btn-submit'
      }, 'submit') : null,
      !this.inEnd ? createElement('button', {
      	style: {
          'float': 'right'
        },
      	on: {
        	click: this.next
        },
        key: 'btn-next'
      }, 'next') : null
    ])
  },
  data: {
  	index: 0,
    total: 1
  },
  computed: {
  	inFirst () { return this.index === 0; },
    inEnd () { return this.index === this.total; }
  },
  methods: {
  	prev () {
    	this.index -= 1;
    },
    next () {
    	this.index += 1;
    },
    noop () {}
  }
})