Mouse Hover in VueJS component implementation in Laravel

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 {
    components: {
    },
    data() {
        return {
          showAudience: false,
          message: 'Hover Me',
        }
    },
    computed: {
    },
    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-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

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

Edit added my 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',
});

Answer

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>

Advertisement

Answer