Alb*_*lan 11 javascript php laravel vue.js
在Laravel上使用鼠标悬停时，鼠标悬停不起作用。
我的Vue文件存储在 resources/js/Dashboard.vue
到目前为止，我尝试进行更改v-on:mouseover，@mouseover但仍然无法正常工作。
结果是，当我将鼠标悬停在按钮上时，它不会更改文本。
我在做什么错，我该如何解决？
下面是我Dashboard.vue文件的内容；
<template>
<div id="mouse">
<a
v-on:mouseover="mouseover"
v-on:mouseleave="mouseleave">
{{message}}
</a>
</div>
</template>
<!--Force Override of the css style for datepicker class-->
<style>
#mouse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 280px;
height: 50px;
margin: 0 auto;
line-height: 50px;
text-align: center;
color: #fff;
background: #007db9;
}
</style>
<script>
export default {
components: {
},
data() {
return {
showAudience: false,
message: 'Hover Me',
}
},
computed: {
},
methods : {
mouseover: function(){
this.message = 'Good!'
},
mouseleave: function(){
this.message = 'Hover Me!'
}
},
mounted() {
},
}
</script>
在这里，我Blade.php文件的内容；
@extends('layouts.app', ['pageSlug' => 'dashboard'])
@section('content')
<dashboard-component></dashboard-component>
@endsection
@push('js')
<script src="{{ asset('black') }}/js/plugins/chartjs.min.js"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script>
$(document).ready(function() {
//demo.initDashboardPageCharts();
});
</script>
@endpush
要仔细查看并在本地复制，下面是该package.json文件；
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"chart.js": "^2.8.0",
"friendly-errors-webpack-plugin": "npm:@soda/friendly-errors-webpack-plugin@^1.7.1",
"vue-chartjs": "^3.4.2",
"vue2-datepicker": "^2.12.0"
}
}
编辑添加了我的app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import App from './components/App.vue'
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
Vue.component('dashboard-component', require('./components/Dashboard.vue').default);
Vue.component('base-table', require('./components/base/BaseTable.vue'));
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
new Vue({
el: '#app',
});
答案是我应该把
script src="{{ asset('js/app.js') }}"></script>
在 resources/views/layouts/app.blade.php 中，而不是将其放在我的其他视图文件中，例如我手动创建的视图文件中。对于那些想知道我应该在 app.blade.php 中哪里放置上面的代码的人。将其放在 body 标记的末尾
例如在 app.blade.php 中
<body>
// some code here
// some code there
// put the script code here
<script src="{{ asset('js/app.js') }}"></script>
</body>
| 归档时间： |
|
| 查看次数： |
258 次 |
| 最近记录： |