Как правильно подключить Vue.js без конфликта с app.js ?

@renat_dmitriev · Регистрация: 26.08.2016

Author24 — интернет-сервис помощи студентам

И для чего вообще нужен app.js ?

Делаю простой blade, подключаю в нем же Vue.js...Событие v-on:click не отрабатывает, кликаю по кнопке - ничего не происходит. Стоит из родительского Layouts.app убрать подключение app.js - все работает нормально.

Ставил строку подключения app.js перед vue.js - пишет что не может загрузить ресурс
Ставил строку подключения vue.js перед app.js - пишет что не может найти элемент #usrs

Так как же правильно подключить vue.js, чтобы она корректно взаимодействовала с app.js?

PHP    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@extends('layouts.app')
 
@section('content')
 
<div id = usrs class = container>
    
    <button v-on:click = 'test'>@{{ test() }}</button>
    
</div>
 
<script src="{{ asset('js/vue.js') }}"></script>
<script>
 
    var app = new Vue({
      el: '#usrs',
      
      data: {
        users: null
      },
      
      methods: {
        
        test: function(){
            alert(1);
            return 'test';
        }   
      }       
});
 
</script>
 
@endsection

ytf · 06.02.2018, 22:10

в идеале вы можете обратиться к разработчикам vue.js и app.js с ошибкой и просьбой подсказать метод совместного вызова двух js файлов

@renat_dmitriev · 07.02.2018, 18:22 **[ТС]**

На всякий случай напишу решение, хотя оно получилось не от понимания а просто методом тыка. Выполнив команду 'npm install' получил файл app.js в читабельном неоптимизированном виде. В нем есть строчка:

JavaScript    
        
    Скопировано
1
2
3
var app = new Vue({
  el: '#app'
});

то есть app.js изначально сам подключает библиотеку Vue. Другое дело, что эта строчка все портила, поскольку видимо #app это главный div стандартного ларавеловского приложения и любые созданные объекты Vue внутри него она просто перетирала. Ее закомментирование дало результат.

@GrafikRem · 10.02.2018, 01:35

Вообще Vue включен в современном laravel по умолчанию, так что ничего подключать не нужно... Если пишете компонентами, их нужно подключить в файле app.js. прописав к ним пути на подобии примера Example.vue там же, и потом компоненты будут доступны вам в любом месте приложения. так же корневой файл app.js нужно подключить в том месте шаблона, где он вам необходим, и создать div с id = #app ---

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
@section('content')
    <div id="app">
        <Control></Control>
    </div>
    <script src="/js/app.js"></script>
@endsection

Новые блоги и статьи Все статьи Все блоги /
Похоже LM превзошла меня в умении манипулирования аргументами, но это надо проверить. Линейное решение нелинейной задачи. Hrethgir 10.04.2025 В продолжение Эта LM дала ответ похожий на нормальный. В комментриях мой комментарий - похоже она првзошла меня в умении манипуляций аргументами. Assistant qwen2. 5-14b-instruct . Сначала. . .	Переменные в Python py-thonny 10.04.2025 Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .	Многопоточность в C#: Task и асинхронные операции UnmanagedCoder 10.04.2025 Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .	Линейное решение не линейной задачи (емкость вычислений в сравнении с традиционными решениями пока не определена). Hrethgir 10.04.2025 В рамках предстоящих вычислений пришлось (да, я тоже знаю про корень числа, и про степеня, и прочие теоремы, но. . . ) найти способ нахождения отношения двух углов. . . .	Запуск контейнеров Docker на ARM64 Mr. Docker 09.04.2025 Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .
Vue SFC компонент на PHP с Fusion Jason-Webb 09.04.2025 PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .	TypeScript vs JavaScript: Отличия и когда что использовать Reangularity 09.04.2025 JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .	Подключение Kafka к Elasticsearch Codd 09.04.2025 Apache Kafka и Elasticsearch — две мощные технологии, которые при совместном использовании создают эффективную платформу для обработки и анализа данных в реальном времени. Kafka, выступая в роли. . .	Реализации таймеров в Unity GameUnited 09.04.2025 Время — важный ресурс любой игры. Разработка качественных игровых механик невозможна без грамотного управления временем, а таймеры выступают ключевым инструментом этого управления. Представьте себе. . .	Функции высшего порядка в JavaScript run.dev 09.04.2025 Функции высшего порядка представляют собой один из фундаментальных камней функционального программирования в JavaScript. По сути, это функции, которые либо принимают другие функции в качестве. . .

ytf 276 / 259 / 185 Регистрация: 15.08.2017 Сообщений: 1,483
	06.02.2018, 22:10
	в идеале вы можете обратиться к разработчикам vue.js и app.js с ошибкой и просьбой подсказать метод совместного вызова двух js файлов 0