Laravel Vue.js События не стреляют - PullRequest
0 голосов
/ 28 ноября 2018

Попытка использовать только однофайловые компоненты с Laravel.Компоненты смонтированы, но события не запускаются.Внутри ExampleComponent у меня есть кнопка @click="test", которая не срабатывает.

Ранее он работал, когда я непосредственно использовал ExampleComponent в шаблоне блейда, но после включения компонента App.vue события прекратились.

Шаблон блейда

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <style>

    </style>
</head>
<body>
    <div id="app">
    </div>

    <script src="{{ mix('/js/app.js') }}""></script>
    <script src="/js/app.js"></script>
</body>

app.js

require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import App from './components/App.vue'

Vue.use(Buefy)
Vue.component('navbar', require('./components/Navbar.vue'));


new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
});

App.vue

<template>
  <div id="app">
    <ExampleComponent/>
  </div>
</template>

<script>
import ExampleComponent from './ExampleComponent.vue'

export default {
  components: {
    ExampleComponent
  }
}
</script>

ExampleComponent.vue

<template>
  <div style="background-color: #f7faff">
    <navbar></navbar>
    <button @click="test">Submit</button>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    test() {
      console.log("TEST")
    }
  },
  mounted() {
    console.log("Component mounted.");
  }
};
</script>

1 Ответ

0 голосов
/ 28 ноября 2018

В вашем шаблоне блейда, похоже, есть конфликтующие загружаемые файлы Javascript.

    <script src="{{ mix('/js/app.js') }}""></script>

Должен быть загружаемый скрипт only .Таким образом, Laravel Mix всегда может скомпилировать последние изменения в ваш файл app.js.Посмотрите, поможет ли это, потому что ваши файлы .vue и .js выглядят правильно подключенными.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...