Vue - Simple component

Made with std Inputbox over Select combo

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
 === Vue JS ====

  <combo-widget initvalue="bess" v-on:valuechange="childcombochange" id="mycombo"></combo-widget>


<script id="tmpl-combo-widget" type="text/x-template">
<div class="ipwrapper" >
    		<input class="ncselectinput" v-on:change="inputChange" type="text" v-model="value" />
        <select class="ncselect" v-on:change="selectChange" v-model="value">
        <option>bert</option>
        <option>bess</option>
        <option>betty</option>
        </select>
    	</div>
</script>

CSS

combo-widget .ncselect {
  position: relative;
  width: 230px;
  height: 26px;
}

combo-widget .ncselectinput {
  position: absolute;
  z-index: 2;
  width: 200px;
  height: 22px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border: 1px solid #C0C0C0;
  border-right: 0;
  background-color: rgb(248, 248, 248);
}

combo-widget .ipwrapper {
  display: inline-block;
  position: relative;
}

input:focus,
select:focus {
  outline: none !important;
}

JavaScript

Vue.component('combo-widget', {
  template: "#tmpl-combo-widget",
  props: ['initvalue'],
  data() {
    return {
    	value:'bert'
    }
  },
  methods: {
  	created: function () {
    	console.log("Created");
    	this.value = this.initvalue;
    },
    selectChange: function() {
      this.$emit('valuechange',this.value);//pass change value back to parent
    },
    inputChange: function() {
      this.$emit('valuechange',this.value);//pass change value back to parent
    }
  }
});

new Vue({
  el: '#mycombo',
  data: {
    myvalue: ""
  },
  methods: {
    childcombochange: function(val) {
    	console.log("value:",val);
      this.myvalue = val;
    }
  }
})