Javascript 鼠标悬停在Laravel中的VueJS组件实现中

在Laravel上使用鼠标悬停时，鼠标悬停不起作用

我的Vue文件存储在

resources/js/Dashboard.Vue

到目前为止，我尝试用

@mouseover

更改

v-on: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>

@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

{
    "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"
    }
}

要仔细查看并在本地复制，下面是

package.json

文件

<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>

@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

{
    "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',
});

require（'./bootstrap'）；
window.Vue=require（'Vue'）；
从“Vue”导入Vue
从“./components/App.vue”导入应用程序
/**
*以下代码块可用于自动注册您的
*Vue组件。它将递归扫描此目录以查找Vue
*组件，并使用其“basename”自动注册它们。
*
*例如../components/ExampleComponent.vue->
*/
//const files=require.context（'./'，true，/\.vue$/i）；
//files.keys（）.map（key=>Vue.component（key.split（'/'）.pop（）.split（'.'）[0]，files（key.default））；
组件（'dashboard-component'，require（'./components/dashboard.Vue'）。默认值）；
组件（'base-table'，require（'./components/base/BaseTable.Vue'）；
组件（'example-component'，require（'./components/ExampleComponent.Vue'）。默认值）；
新Vue({
el:“#应用程序”，
});

尝试添加这些以防止默认事件和传播

v-on:mouseover.prevent.stop="mouseover"
v-on:mouseleave.prevent.stop="mouseleave"

---

代码可以工作，当我在我的系统上运行时，它可以工作

我在JSFiddle上试过了

//html
<div id="mouse" class="mouse1">
 <a
    v-on:mouseover="mouseover"
    v-on:mouseleave="mouseleave">
    {{name}}
  </a>
</div>
//CSS
#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;
  }

//js 
new Vue({
  el: "#mouse",
  data: {
   name: 'Hover Me!',
     showAudience: false,
  },
  methods : {
    mouseover: function(){
      this.name = 'Good!'
    },    
    mouseleave: function(){
      this.name = 'Hover Me!'
    }
    },
    mounted(){
        }    
})

//html
{{name}}
//CSS
#老鼠{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
显示：块；
宽度：280px；
高度：50px；
保证金：0自动；
线高：50px；
文本对齐：居中；
颜色：#fff；
背景：#007db9；
}
//js
新Vue({
el:“鼠标”，
数据：{
name:‘悬停在我身边！’，
观众:错,，
},
方法：{
mouseover:function（）{
this.name=‘很好！’
},    
mouseleave:function（）{
this.name='悬停在我旁边！'
}
},
安装的（）{
}    
})

整洁。看起来，当按钮在动画中更改大小时，鼠标会进入或退出悬停状态，因为边正在移动

我在每个按钮周围添加了一个div，并将悬停触发器附加到div而不是按钮上

<body>
    <div id="app">
        <h1>Hover the mouse near the border</h1>
        <hr>
        <div @mouseover="hoverOver" @mouseout="hoverOut">
            <button :class="classes">IMMEDIATE</button>
        </div>
        <br><br><br>
        <div @mouseover="hoverOver" @mouseout="hoverOutTimeout">
            <button :class="classes">WAIT JUST A BIT
        </button>
        </div>
    </div>

将鼠标悬停在边界附近

立即的




等一下

---

在您的

Dashboard.vue

文件中，尝试更改以下内容：

data（）{
返回{
观众:错,，
消息：“悬停我”，
}
},

进入：

数据：{
观众:错,，
消息：“悬停我”，
},

---

（也许某个对象对你更合适）

答案是我应该

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

scriptsrc=“{{asset（'js/app.js'）}}>

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

//这里有一些代码
//那里有一些代码
//把脚本代码放在这里

这可能是一个愚蠢的问题，但是你是否将javascript文件添加到webpack&run

npm run dev

每当我在vue文件中更改某些内容时，我都会执行npm run dev，并且我的webpack.mix.js已经包含mix.js（'resources/js/app.js'，'public/js'）.sass（'resources/sass/app.scss'，'public/css'）；好吧，这只是一个很快的想法，因为我总是忘记这些小事情。你有没有检查你的控制台日志，有没有错误？最好在脚本中添加一些简单的console.log，看看它是否会初始化。还有一个建议，如果您使用的是google chrome，那么有一个很好的vue.js扩展，以便于预览和调试。控制台日志中没有错误：（我真的不知道我还能做什么或者我还需要做什么。这只是一个简单的代码，我不知道我做错了什么。）