Search.vue

<template>
    <div class="mainContent">
        <slot :response="response" :loading="loading"></slot>
    </div>
</template>

<script>
  // require modules
  /* eslint-disable no-unused-vars */
  const _ = require('lodash');
  let host = require('./js/const').host;

  export default {
    name: "Search",
    data() {
      return {
        response: null,
        loading: false,
        isDev: process.env.NODE_ENV === 'development'
      }
    },
    methods: {
      fetchProteinList(keyword, taxId, page) {
        const vm = this

        // /* eslint-disable no-console */
        // console.log(vm.incDesc);

        vm.loading = true

        // let url = `http://${host}/proteins?query=${keyword}&species_tax_id=${taxId}&page=${page}`;
        if(vm.isDev) {
          host = require('./js/const').devHost;
        }

        let url = `${host}/proteins?query=${keyword}&species_tax_id=${taxId}&size=10000`;

        if (keyword && !_.isEmpty(keyword)) {
          fetch(url)
            .then(response => response.json())
            .then((response) => {
              // /* eslint-disable no-console */
              // console.log(response);

              setTimeout(() => {
                vm.loading = false;
                vm.response = response

                // console.log(response);
                // if (response && !_.isEmpty(response)) {
                //   this.response = _.flatMap(response, (n) => [{ text: n.name, style: 'background-color: ' + n.color }]);
                // }
              }, 10);
            });
        } else {
          url = `${host}/proteins?species_tax_id=${taxId}&size=10000`;
          fetch(url)
              .then(response => response.json())
              .then((response) => {
                // /* eslint-disable no-console */
                // console.log(response);

                setTimeout(() => {
                  vm.loading = false;
                  vm.response = response

                  // console.log(response);
                  // if (response && !_.isEmpty(response)) {
                  //   this.response = _.flatMap(response, (n) => [{ text: n.name, style: 'background-color: ' + n.color }]);
                  // }
                }, 10);
              });
        }
      },
      fetchCondensateList(keyword, taxId, page) {
        const vm = this

        // /* eslint-disable no-console */
        // console.log(vm.incDesc);

        vm.loading = true

        if(vm.isDev) {
          host = require('./js/const').devHost;
        }

        // let url = `http://${host}/condensates?query=${keyword}&species_tax_id=${taxId}&page=${page}`;
        let url = `${host}/condensates?query=${keyword}&species_tax_id=${taxId}&size=10000`;

        // if(vm.isDev) {
        //   url = `/json/condensateList.json`;
        // }

        if (keyword && !_.isEmpty(keyword)) {
          fetch(url)
            .then(response => response.json())
            .then((response) => {
              // /* eslint-disable no-console */
              // console.log(response);

              setTimeout(() => {
                vm.loading = false;
                vm.response = response

                // console.log(response);
                // if (response && !_.isEmpty(response)) {
                //   this.response = _.flatMap(response, (n) => [{ text: n.name, style: 'background-color: ' + n.color }]);
                // }
              }, 10);
            });
        } else {
          url = `${host}/condensates?species_tax_id=${taxId}&size=10000`;
          fetch(url)
            .then(response => response.json())
            .then((response) => {
              // /* eslint-disable no-console */
              // console.log(response);

              setTimeout(() => {
                vm.loading = false;
                vm.response = response

                // console.log(response);
                // if (response && !_.isEmpty(response)) {
                //   this.response = _.flatMap(response, (n) => [{ text: n.name, style: 'background-color: ' + n.color }]);
                // }
              }, 10);
            });
        }
      }
    }
  }
</script>

<style scoped>
    .mainContent {
        padding: 20px;
    }
</style>