Vue-mg-modal-search-master NPM

vue-mg-modal-search-master

Installation

npm i vue-mg-modal-search-master

Usage

app.js

import ModalSearchMaster from 'vue-mg-modal-search-master'
Vue.component('ModalSearchMaster', ModalSearchMaster)

Example:

<template>
  <section class="container mt-2">
    <modal-search-master v-model="master" @search="onSearch" @find="onFind"/>
    id: {{master.id}}
    code: {{master.code}}
    name: {{master.name}}
  </section>
</template>

<script>
import ModalSearchMaster from '../src/vue-mg-modal-search-master'
import 'bootstrap/dist/css/bootstrap.min.css'
export default {
  data() {
    return {
      master: {
        id: 1,
        code: '001',
        name: 'aaaa',
      },
      items: [],

      isLoading: false,
    }
  },
  methods: {
    onSearch: function (code, name, callback) {
      let data = [
        {id: 1, code: '10', name: 'aaaa'},
        {id: 2, code: '20', name: 'bbbb'},
      ]
      callback(data)
    },
    onFind: function (code, callback) {
      const list = [
        {id: 1, code: '10', name: 'aaaa'},
        {id: 2, code: '20', name: 'bbbb'},
        {id: 3, code: '30', name: 'cccc'},
      ]
      const data = list.find(function (value) {
        return value.code == code
      })
      callback(data)
    },
  },
  components: {
    ModalSearchMaster,
  },  
}
</script>