@jazzus

Как объединить 2 компонента VUE в blade LAravel, если их нельзя объединить?

Структура стандартная, которую предлагает Laravel по дефолту.
Т.е. в app.js подключаются все компоненты.
А потом подключается app
const app = new Vue({
    el: '#app',
});

const app2 = new Vue({
    el: '#app2',
});

Затем в главном шаблоне Laravel подключаю app
<script src="{{ asset('js/app.js') }}" defer></script>

и затем в консоли если какого-то app нет он(или оно) пишет
[Vue warn]: Cannot find element: #app2
на скорость не влияет, но как вы от такого избавляетесь? App2 мне нужен для второго компонента на одной стр, когда их в один компонент вместе поместить нельзя (например когда в разных местах шаблона laravel - в шапке и в подвале одновременно). Как правильно все это подключить?
  • Вопрос задан
  • 782 просмотра
Решения вопроса 2
aleksejjjj
@aleksejjjj
Компонент и второй инстанс Vue который вы пытаетесь создавать это разные вещи. Вам Юрий в принципе всё правильно сказал. В простейшем виде код будет примерно такой:
// В blade шаблоне
<div id="app">
    <header-component></header-component>

    <!-- Ваш блейд шаблон -->

    <footer-component></footer-component>
</div>

// В app.js
// Нужные компоненты
Vue.component('header-component', require('./components/HeaderComponent.vue').default);
Vue.component('footer-component', require('./components/FooterComponent.vue').default);

const app = new Vue({
    el: '#app',
});
Ответ написан
modestguy
@modestguy
full-stack web developer
Мне кажется тут не совсем верное понимание spa-приложений. По идее,( если вы не переписываете приложение со стандартного на реактивное ) - у вас должна быть одна единственная точка входа монтирования всего на дом-дерево и соответственно единственный тэг в дом дереве. Все осиальное - это один большой компонент, состоящий из других компонентов(которые в свою очередь могут иметь разный стэйт). Соответственно, нет смысла маунтить несколько компонентов к разным блокам, как это сделано у вас. Сам с vue.js не знаком, но уверен-там такой же принцип, как в реакт и других реактивных фреймворках.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Alex_Wells
@Alex_Wells
PHP/TS/Kotlin developer
Подключать отдельные JS файлы с отдельными вьюхами для разных blade шаблонов.
Ответ написан
@AlexanderToster
Я сделал следующее -
1. Создаем файл resources\js\app2.js (скопировал app.js). В нем меняем el: '#app2', подключаем нужные файлы-компоненты.
2. Создаем файл resources\sass\app2.scss (скопировал app.scss)
3. В файле webpack.mix.js создаем копированием следующее
mix.js('resources/js/app2.js', 'public/js')
.sass('resources/sass/app2.scss', 'public/css');
4. выполняем npm run dev

приложение app2 готово к работе, можно использовать

Не забываем подключить его в нужном вам шаблоне (где будет располагаться div id="app2")
<script src="{{ asset('js/app2.js') }}" defer></script>


ну и непосредственно использование
<div id="app2">
     <example-component2></example-component2>
</div>
Ответ написан
Ваш ответ на вопрос

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

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