컴포넌트 연결 vue

by eglowc

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div id="app">
  <p>
    value: {{value}}
  </p>
  <typeahead v-model="value" v-bind:items="items" >
  </typeahead>

</div>

CSS

ul li {
  list-style: none;
  padding: .2em;
}

JavaScript

var krews = [{
  "accountId": "han.lee",
  "employeeName": "이현철",
  "jobPart": "사내정보시스템"
}, {
  "accountId": "ringo.j",
  "employeeName": "정진수",
  "jobPart": "사내정보시스템"
}, {
  "accountId": "loui.kwon",
  "employeeName": "권영민",
  "jobPart": "사내정보시스템"
}, {
  "accountId": "melissa.cho",
  "employeeName": "조영주",
  "jobPart": "선물하기셀"
}, {
  "accountId": "medivh.0923",
  "employeeName": "전현우",
  "jobPart": "인재영입"
}, {
  "accountId": "keaton.kil",
  "employeeName": "길기호",
  "jobPart": "다음뉴스"
}];




Vue.component("typeahead", {
  template: '\
  <div>\
 	<input \
  ref="input" \
  v-bind:value="value" \
  v-on:blur="formatValue"\
  v-on:input="updateValue($event.target.value)">\
    <ul class="dropdown" style="width:100%">\
      <li v-for="suggestion in matches">\
        <a href="#" class="btn btn-default">{{ suggestion.accountId }}</a>\
      </li>\
    </ul>\
  </div>',
  props: {
    value: {
      type: String,
      default: 0
    },
    items: {
      type: Array,
      required: true
    }
  },
  data: function() {
    return {
      open: false,
      current: 0
    }
  },

  methods: {
    updateValue: function(value) {
      if (this.open == false) {
        this.open = true;
        this.current = 0;
      }
      this.$emit('input', value)

    },
    formatValue: function() {
      // this.$refs.input.value = this.value + "blur";
    },
  },
  computed: {

    //Filtering the suggestion based on the input
    matches() {
        return this.items.filter((s) => {
          return s['accountId'].indexOf(this.value) >= 0;
        });
      },

      //The flag
      openSuggestion() {
        return this.value !== "" &&
          this.matches.length != 0 &&
          this.open === true;
      }
  }
});


var app = new Vue({
  el: "#app",
  data: {
    value: null,
    items: krews
  },
  methods: {

  }
})