javascript - Mouse Hover in VueJS component implementation in Laravel - Stack Overflow

admin管理员组

文章数量:1401616

My Mouse hover is not working when I am using it on Laravel.

My Vue file is stored in resources/js/Dashboard.vue

What I tried so far is to change v-on:mouseover with @mouseover but it still not working.

The Result is that when I hover the button it doesn't change texts.

What am I doing wrong and how can I fix it?

Below, the content of my Dashboard.vue file;

<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 {
    ponents: {
    },
    data() {
        return {
          showAudience: false,
          message: 'Hover Me',
        }
    },
    puted: {
    },
    methods : {
    mouseover: function(){
      this.message = 'Good!'
    },    
    mouseleave: function(){
      this.message = 'Hover Me!'
    }
    },
    mounted() {
    },
}
</script>

Here, the content of my Blade.php file;

@extends('layouts.app', ['pageSlug' => 'dashboard'])

@section('content')
  <dashboard-ponent></dashboard-ponent>
  @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

To take a close look and reproduce locally, below is the package.json file;

{
    "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-piler": "^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"
    }
}

Edit added my app.js

require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import App from './ponents/App.vue'

/**
 * The following block of code may be used to automatically register your
 * Vue ponents. It will recursively scan this directory for the Vue
 * ponents and automatically register them with their "basename".
 *
 * Eg. ./ponents/ExampleComponent.vue -> <example-ponent></example-ponent>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vueponent(key.split('/').pop().split('.')[0], files(key).default));
Vueponent('dashboard-ponent', require('./ponents/Dashboard.vue').default);
Vueponent('base-table', require('./ponents/base/BaseTable.vue'));

Vueponent('example-ponent', require('./ponents/ExampleComponent.vue').default);


new Vue({
    el: '#app',
});

My Mouse hover is not working when I am using it on Laravel.

My Vue file is stored in resources/js/Dashboard.vue

What I tried so far is to change v-on:mouseover with @mouseover but it still not working.

The Result is that when I hover the button it doesn't change texts.

What am I doing wrong and how can I fix it?

Below, the content of my Dashboard.vue file;

<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 {
    ponents: {
    },
    data() {
        return {
          showAudience: false,
          message: 'Hover Me',
        }
    },
    puted: {
    },
    methods : {
    mouseover: function(){
      this.message = 'Good!'
    },    
    mouseleave: function(){
      this.message = 'Hover Me!'
    }
    },
    mounted() {
    },
}
</script>

Here, the content of my Blade.php file;

@extends('layouts.app', ['pageSlug' => 'dashboard'])

@section('content')
  <dashboard-ponent></dashboard-ponent>
  @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

To take a close look and reproduce locally, below is the package.json file;

{
    "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-piler": "^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"
    }
}

Edit added my app.js

require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import App from './ponents/App.vue'

/**
 * The following block of code may be used to automatically register your
 * Vue ponents. It will recursively scan this directory for the Vue
 * ponents and automatically register them with their "basename".
 *
 * Eg. ./ponents/ExampleComponent.vue -> <example-ponent></example-ponent>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.ponent(key.split('/').pop().split('.')[0], files(key).default));
Vue.ponent('dashboard-ponent', require('./ponents/Dashboard.vue').default);
Vue.ponent('base-table', require('./ponents/base/BaseTable.vue'));

Vue.ponent('example-ponent', require('./ponents/ExampleComponent.vue').default);


new Vue({
    el: '#app',
});

• javascript
• php
• laravel
• vue.js

Share Improve this question Follow edited Sep 23, 2019 at 0:51 Albert Ruelan asked Sep 20, 2019 at 9:23 Albert RuelanAlbert Ruelan 9051111 silver badges2424 bronze badges 13

• 1 This might be a stupid question, but did you add your javascript files to webpack & run npm run dev – zlatan Commented Sep 20, 2019 at 9:26
• 1 I would always execute npm run dev whenever i change something in my vue files – Albert Ruelan Commented Sep 20, 2019 at 9:34
• 1 and my webpack.mix.js already contains mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); – Albert Ruelan Commented Sep 20, 2019 at 9:37
• 1 Okay, it was just a quick thought, since I forgot about these little things all the time. Did you check your console logs, any errors there? Might as well add some simple console.log inside your script, to see if it even initializes. One more suggestion, if you're using google chrome, there's a nice vue.js extension for easier preview and debugging. – zlatan Commented Sep 20, 2019 at 9:41
• 1 theres no error in console log sadly. :( and i really dont know what else i can do or what else i need to do. Its just a simple code and i don't know what i'm doing wrong – Albert Ruelan Commented Sep 20, 2019 at 9:47

 |  Show 8 more ments

5 Answers 5

Sorted by: Reset to default 0

Try adding these to prevent default event and propagation

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

The code works, When i run on my system it works.

I tried it on 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(){
        }    
})

Neat. Looks like as the button changes size during the animation, the mouse goes in and out of hover state because the edge is moving.

I added a div around each button, and attached the hover triggers to the divs instead of the buttons

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

https://jsfiddle/jmbldwn/kbswLpto/5/

In your Dashboard.vue file, try to change below:

data() {
    return {
        showAudience: false,
        message: 'Hover Me',
    }
},

Into:

data: {
    showAudience: false,
    message: 'Hover Me',
},

(maybe an object works better for you)

The answer is that i should put

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

in resources/views/layouts/app.blade.php instead of putting it in my other view file such as those i manually created. For those wondering where in app.blade.php should i put the code above.Put it at the end of the body tag

For example in app.blade.php

<body>
 // some code here
 // some code there


// put the script code here
<script src="{{ asset('js/app.js') }}"></script>
</body>

本文标签： javascriptMouse Hover in VueJS component implementation in LaravelStack Overflow