Tag Editor - Using Vue

Made with std Inputbox over Select combo

by Ben Clayton

HTML

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

  <combo-widget id="interface"></combo-widget>

</div>

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: '<div class="ipwrapper" >\
    		<input class="ncselectinput" type="text" v-model="value" />\
        <select class="ncselect" v-model="lvalue">\
        <option>bert</option>\
        <option>bess</option>\
        <option>betty</option>\
        </select>\
    	</div>',
  props: {
    item: Object,
  },
  data() {
    return {
      value: 'Fred',
      lvalue: 'bert'
    }
  },
  methods: {
    toggle() {
      this.inEdit = !this.inEdit;
    }
  }
});

/*
  viewModel: function(params) {
    var self = this;
    self.value = ko.observable(params.value);
    self.selvalue = ko.observable(params.value);
    self.options = ko.observableArray(["Bert", "Bertington", "Bess", "Bessington"]);

    self.selchg = function(opt) {
      this.value(self.selvalue());
    }.bind(self);

  },
*/

Vue.component('keyword-widget', {
  template: '<div v-for="keyword in keywords">\
		<div>\
    	<combo-widget params="value:one"></combo-widget>\
      <combo-widget params="value:two"></combo-widget>\
      <button  v-on:click="delKeyword">Del</button>\
    </div>\
   	</div>\
    <button v-on:click="addKeyword">Add</button>'

});

/*
  viewModel: function(params) {
    var self = this;
    self.keywords = ko.observableArray([{
      "one": "type",
      "two": "video"
    }]);

    self.addKeyword = function() {
      self.keywords.push({
        "one": "",
        "two": ""
      });
    }.bind(this);

    self.delKeyword = function(kw) {
      this.keywords.remove(kw);
    }.bind(this);


  },
 */

new Vue({
  el: '#interface',
  data: {
    items: [{
      id: 1,
      name: 'test-1'
    }, {
      id: 2,
      name: 'test-2'
    }, {
      id: 3,
      name: 'test-3'
    }],
  }
});