Vue - Keyword Component

Made with two combo-widgets

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
 === Vue JS - Twin combo-widgets ====
<div id="mycombo">
  <combo-widget :initvalue='myname' v-on:valuechange="childcombochange_name"></combo-widget>
  <combo-widget :initvalue='myvalue' v-on:valuechange="childcombochange_value"></combo-widget>
  <br/> Non constrained Combo value: <b>{{myname}} {{myvalue}}</b>
</div>
 

<script id="tmpl-combo-widget" type="text/x-template">
  <div class="combo-widget">
    <input class="cwselectinput" v-on:change="valuechange" type="text" v-model="value" />
    <select class="cwselect" v-on:change="valuechange" v-model="value">
      <option v-for="opt in optionList" :value="opt">{{opt}}</option>
    </select>
  </div>
</script>

CSS

.combo-widget {
  display:inline-block;
}
.combo-widget .cwselect {
  position: relative;
  width: 230px;
  height: 26px;
}

.combo-widget .cwselectinput {
  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);
}


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

JavaScript

Vue.component('combo-widget', {
  template: "#tmpl-combo-widget",
  props: ['initvalue'], // initvalue & idx is passed in from attribute on element
  data() {
    return {
      // 'initvalue' is added to data by incoming parameter (see props)
      optionList: ['bert', 'bess', 'betty'],
      value: 'bert' // Both input and select are bound to this value. The value is overidden by initvalue at start
    }
  },
  created() { // auto called on component create (see vuejs.org/guide about lifecycle hooks)
    console.log("Created");
    this.value = this.initvalue;
  },
  methods: {
    valuechange: function() {// called when select changes
      this.$emit('valuechange', this.value); //pass change value back to parent by event
    }
  }
});
//---------------------------------------------------------
new Vue({
  el: '#mycombo',
  data: {
    myname: "type",
    myvalue: "video"
  },
  methods: {
    childcombochange_name: function(val) {
      console.log("name change:", val);
      this.myname = val;
    },
    childcombochange_value: function(val) {
      console.log("value change:", val);
      this.myvalue = val;
    }

  }
});