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: 'Привет!'
    },
    /* остальный код */
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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