Laravel Vue.js 事件未触发答案

【问题标题】：Laravel Vue.js Events not firingLaravel Vue.js 事件未触发
【发布时间】：2019-04-30 15:16:34
【问题描述】：

尝试在 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>

【问题讨论】：

为什么id="app"也在app.vue<div id="app"> <ExampleComponent/>中使用？
这就是 Vue.js 在他们的演示应用程序中的做法。 codesandbox.io/s/o29j95wx9@BoussadjraBrahim
它不需要尝试删除，它可能会产生一些问题，因为在这种情况下你有两个具有相同 id 的元素

标签： javascript laravel vue.js vuejs2

【解决方案1】：

您的 Blade 模板似乎加载了冲突的 Javascript 文件。

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

应该是您正在加载的唯一脚本。这样，Laravel Mix 总是可以编译你的 app.js 文件的最新更改。看看这是否有帮助，因为您的 .vue 和 .js 文件看起来连接正确。

【讨论】：

就是这样！非常感谢！

【解决方案2】：

我遇到了类似的问题，才发现我在app.js中做了一个不必要的导入

【讨论】：