2

Здравствуйте. У меня стойкое чувство, что я введён в заблуждение и всё делаю абсолютно не так.

Есть blade-шаблоны, в которых внутри #app заложен код, который как-то преобразуется сервером и пользователю выдаётся html-код, с разными директивами vue. Иногда по определенным причинам эти шаблоны нельзя преобразовать и запихнуть в компонент Vue.

Вот, например, задачи, которые решает Vue:

  1. Валидация и динамичность формы в зависимости от выбранных данных.
  2. Вывод элементов json-массива, который получен через Ajax из бекэнда.

Вот реализация первой задачи, которое пришло мне в голову:

  • Чтобы браузеру пользователя не пришлось загружать js-файлы, в которых много дублирующегося кода, подключать по отдельности файлы, где подрубается сам Vue, и определенные его компоненты.
  • Писать JS-код для Vue прямо в коде страницы (blade-шаблоне), или создавать отдельный js-файл для каждой страницы, а потом подключать его в blade-шаблон

Пример кода:

@section('content')

<div id="app">
<!-- Конструкции Blade, использующие PHP-переменные, и HTML-код, содержащий в себе разные директивы Vue -->
</div>

<!-- Подключаем файл app.js, в котором есть только следующее -->
<!-- window.Vue = require('vue'); -->
<script type="text/javascript" src="{{ mix('/js/app.js') }}"></script> 

<!-- Здесь подключается на настраивается VeeValidate -->
<script type="text/javascript" src="{{ mix('/js/validator.js') }}"></script> 

<!-- Здесь пишется код для приложения Vue -->
<script type="text/javascript">
  const app = new Vue({
    el: '#app',
    data: {!! json_encode($data) !!}, // На стороне сервера задаём переменные и подключаем их
    /* остальный код */
  });
</script>

@stop

Реализация второй задачи:

  • В blade-шаблоне внутри #app просто пишу добавляю .
  • Подключаю js-файл с require('vue');
  • Подключаю js-файл с Vue.component('component', require('/components/component.vue')) и new Vue({el: '#app'}).

Спрашиваю мнения сообщества: насколько дикими вам кажутся подобные реализации?

Как поступили бы вы в этих случаях?

Как лучше организовать подключение пакетов, файлов и компонентов, чтобы они не вызывали конфликтов и не перегружали страницу?

Может быть вы посоветуете что-нибудь почитать про это?

Спасибо.

1 ответ 1

1

Использование JS в Blade не запрещается, но это подходит для объявления переменных или например биндинга элементов, то есть не более 3 - 4~ строк. Если вы собираетесь описывать логику методов Vue, то это уже полноценное программирование, и для удобства/аккуратности следует вынести такой код в отдельный файл.

Вариации могут быть совершенно разные, всё зависит от конечного результата, от архектитуры приложения.

Ниже выдуманный пример, в котором я взял за основу ваш.

template.blade.php

<html>
  <body>
    <head>
      @stack('styles')
    </head>

    @yield('content')

    <!-- в случае если vue используется на всех страницах или большинстве --> 
    <script type="text/javascript" src="{{ mix('/js/app.js') }}"></script> 
    @stack('scripts')
  </body>
</html>

page.blade.php

@extends('template')
@section('content')
  <!-- переменная шаблона blade --> 
  <h1>@lang('app.welcome')</h1>
  <div id="app">
    <!-- переменная vue из data --> 
    <p>@{{welcome}}</p>

    <!-- сложный шаблон vue для компонента, если он реально сложный с большим количество строк  --> 
    <!-- плюс ко всему в нем может работать php -->
    <template v-for="field in fields">
      <field :field="field"></field>
    <template>
  </div>
@endsection

@push('scripts')
  <script src="{{ mix('/js/validator.js') }}"></script>
  <!-- field.php --> 
  @include('field')
  var formData = {!! json_encode($data) !!};
  <script src="{{ mix('/js/page.js') }}"></script>
@endpush

field.php

<script type="text/x-template" id="field">
  //шаблон должен быть обернут в общий тег
  <div> 
     {{field.label}}
     <input v-model="field.value" @change="blabla">
     <div>И еще куча всего</div>
 </div>
</script>

page.js

//Компонент для поля, возможно на странице будут и другие компоненты, 
//а может их и не быть совсем.
Vue.component('field', {
    props: ['field'],
    template: '#field',
    methods: {
       blabla: function(){
          //Логика метода
          this.field.value = 123;
       }
    }
});

const app = new Vue({
    el: '#app',
    data: {
       fields: formData.fields,
       welcome: 'Привет!'
    },
    /* остальный код */
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.