尝试在 Laravel 中仅使用单文件组件。组件已安装，但事件未触发。在 ExampleComponent 中，我有一个按钮 @click="test" 不会触发。
以前，当我在 Blade 模板中直接使用 ExampleComponent 时，它工作正常，但在合并 App.vue 组件后，事件停止了。
Blade 模板
<!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>
最佳答案
您的 Blade 模板似乎加载了冲突的 Javascript 文件。
<script src="{{ mix('/js/app.js') }}""></script>
应该是您正在加载的唯一脚本。这样，Laravel Mix始终可以将最新更改编译到您的 app.js 文件。看看这是否有帮助，因为您的 .vue 和 .js 文件看起来正确连接。
关于javascript - Laravel Vue.js 事件未触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53524115/