Swartex
@Swartex
Многорукий могоног

Как правильно разделить проект который написанный на Vue.JS на компоненты?

Занялся изучением VUE
Нашел уже готовый пример небольшого проекта ЛИНК пытаюсь его адаптировать для своих нужд
Он написан грубо говоря одним модулем, а хоте бы спросить и узнать как этот функционал разбить на отдельные модули, для использования с VUE CLI.
Сейчас сделал так:
List.vue
<template>
  <div class="container">
      <div class="row">
        <div class="col">
          <table class="table table-bordered table-hover table-striped table-xs-block">
            <caption>
              <div class="pull-right multiple-action">
                <div class="search">
                  <div class="input-group">
                    <input type="search" class="form-control" placeholder="Search by Name" v-model="search">
                    <span class="input-group-addon">
                      <i class="glyphicon glyphicon-search"></i>
                    </span>
                  </div>
                </div>
                <div class="dropdown filterbox" :class="{ 'open': filterToggle }">
                  <button type="button" class="btn btn-success" v-on:click="filterToggle = !filterToggle">
                    <i class="glyphicon glyphicon-filter"></i>
                  </button>
                  <ul class="dropdown-menu list-group">
                    <li class="list-group-item">
                      <label>Filter by Status</label>
                    </li>
                    <li class="list-group-item">
                      <input type="checkbox" value="actived">Actived
                    </li>
                    <li class="list-group-item">
                      <input type="checkbox" value="deactived">Deactived
                    </li>
                    <li class="list-group-item">
                      <input type="checkbox" value="created"> Created
                    </li>
                  </ul>
                </div>
                <button type="button" class="btn btn-primary">
                  <i class="glyphicon glyphicon-plus" v-on:click="openModal()"></i>
                </button>
              </div>
            </caption>
            <thead class="bg-primary">
              <tr>
                <th v-on:click="sortById = !sortById">ID</th>
                <th v-on:click="sortByName = !sortByName">Name</th>
                <th v-on:click="sortByLocation = !sortByLocation">Location</th>
                <th v-on:click="sortByCurrency = !sortByCurrency">Currency</th>
                <th> Action </th>
              </tr>
            </thead>
            <tr v-for="item in liveSearch ">
              <td v-text="item.id"></td>
              <td v-text="item.name"></td>
              <td v-text="item.location"></td>
              <td v-text="item.currency"></td>
              <td>
                <button type="button" class="btn btn-warning">
                  <i class="glyphicon glyphicon-edit" v-on:click="showModal=true"></i>
                </button>
                <button type="button" class="btn btn-danger">
                  <i class="glyphicon glyphicon-trash"></i>
                </button>
                <!--<button v-on:click="showModal=true" class="uk-button uk-button-primary">Show Modal</button>-->
              </td>
            </tr>
            <tr>
              <td colspan="4" style="float: right">
                <b style="float: right">Итого - {{ total }} у.е.</b>
              </td>
            </tr>
          </table>
          <modal v-if="showModal" v-on:close="showModal = false">
            <h3 slot="title">Item</h3>
            <div slot="body" >
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group">
                    <div class="input-group">
											<span class="input-group-addon">
												<i class="glyphicon glyphicon-ban-circle"></i>
											</span>
                      <input type="text" class="form-control">
                    </div>
                    <span class="help-block">Id is invalid!</span>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <div class="input-group">
											<span class="input-group-addon">
												<i class="glyphicon glyphicon-ban-circle"></i>
											</span>
                      <select class="form-control">
                        <option value="created">Created</option>
                        <option value="actived">Actived</option>
                        <option value="deactived">Deactived</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group" >
                <div class="input-group">
									<span class="input-group-addon">
										<i class="glyphicon glyphicon-user"></i>
									</span>
                  <input type="text" class="form-control" placeholder="Fullname">
                </div>
                <span class="help-block" >Name is empty!</span>
              </div>
              <div class="form-group" >
                <div class="input-group">
									<span class="input-group-addon">
										<i class="glyphicon glyphicon-time"></i>
									</span>
                  <input type="text" class="form-control" placeholder="Old">
                </div>
                <span class="help-block" >Old is empty!</span>
              </div>
              <div class="form-group">
                <div class="input-group">
									<span class="input-group-addon">
										<i class="glyphicon glyphicon-envelope"></i>
									</span>
                  <input type="text" class="form-control" placeholder="Email Address" >
                </div>
                <span class="help-block" >Email is empty!</span>
                <span class="help-block" >Email is invalid!</span>
              </div>
              <button type="button" class="btn btn-primary" v-on:click="submit(item)">Submit</button>
            </div>
            <!-- <div slot="footer" class="text-center"></div> -->
          </modal>
        </div>
      </div>
    </div>
</template>

<script>
  import test from '../static/test.json'
  import Modal from './Modal'
  export default {
    component:{Modal},
    name: "list",
    data() {
      return {
        showModal: false,
        filterToggle: false,
        data: test,
        search: '',
        sortedBy: '',
      }
    },
    computed: {
      total: function () {
        return this.liveSearch.reduce(function (sum, next) {
          return sum + next.currency;
        }, 0);
      },

      liveSearch: function () {
        return this.data.filter((item) => {
          return item.name.toLowerCase().match(this.search.toLocaleLowerCase()) ||
            item.id.match(this.search) ||
            item.location.match(this.search) ||
            item.currency.toString().match(this.search.toString())
        })
      },
      sortById: function (val) {
        this.data = this.sortBy(this.data, 'id', val);
      },
      sortByName: function (val) {
        this.data = this.sortBy(this.data, 'name', val);
      },
      sortByLocation: function (val) {
        this.data = this.sortBy(this.data, 'location', val);
      },
      sortByCurrency: function (val) {
        this.data = this.sortBy(this.data, 'currency', val);
      },
    },
    methods: {
      openModal: function () {
        this.showModal = true;
      },
      sortBy: function(array, param, reverse) {
        let filterA, filterB;
        return array.sort(function (a, b) {
          switch (param) {
            case 'id':
              filterA = a.id;
              filterB = b.id;
              break;
            case 'name':
              filterA = a.name;
              filterB = b.name;
              break;
            case 'location':
              filterA = a.location;
              filterB = b.location;
              break;
            case 'currency':
              filterA = Number(a.currency);
              filterB = Number(b.currency);
              break;
          }
          if (reverse) {
            return (filterA > filterB) ? 1 : -1;
          } else {
            return (filterA < filterB) ? 1 : -1;
          }
        });
      },

    }
  }
</script>

<style scoped>
 
</style>


Modal.vue
<template>
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header bg-primary">
            <button type="button" class="close" v-on:click="$emit('close')"><span aria-hidden="true">&times;</span></button>
            <slot name="title">Modal Title</slot>
          </div>
          <div class="modal-body">
            <slot name="body"></slot>
          </div>
          <div class="modal-footer">
            <slot name="footer"></slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'modal',
    src: '',
    data() {
      return {
        // filterToggle: false,
      }
    },
    methods:{

    }
  }
</script>
<style scoped>

</style>


Но мне кажется или компонент modal который описан в list.vue должен находится в modal.vue ?
  • Вопрос задан
  • 442 просмотра
Пригласить эксперта
Ответы на вопрос 1
GBreazz
@GBreazz
Есть решение в виде уже готовой библиотеки https://github.com/OneWayTech/vue2-datatable

Пример работы https://onewaytech.github.io/vue2-datatable/exampl...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы