clicking on <button @click=""></button> dumps me to git repo url

[LarryEitel]

Can't seem to determine how/why clicking on a button in a new component redirects to git repo url rather than running the passed function.

I can't get it to run a native function like <button @click="alert('hello')"></button> OR a component method.

I am encountering this while trying to add a map component.

Any thoughts?

Thank You

[vedovelli]

@LarryEitel Could you please provide some code we can look at?!

Thanks a lot!

[LarryEitel]

@vedovelli Thank you for taking the time to respond to this.

Please note that the button @click doesn't even fire the javascript alert('hello').

ParksMap.vue

<template>
  <div>
    <button @click="dropMarker">DropMarker</button>
    <!-- other stuff here -->
  </div>
</template>

<script src="./parksMap.js">
</script>

<style>
</style>

pakrsMap.js

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
import {myaddMarker } from './mapsLib.js'
import * as Parks from './parks.js'

import Axios from 'axios';

Axios.defaults.baseURL = process.env.API_LOCATION || 'http://localhost:8000';
Axios.defaults.headers.common.Accept = 'application/json';
Vue.$http = Axios;

Vue.use(VueGoogleMaps, {
  installComponents: true,
  load: {
    key: 'bla - bla',
    v: '3.26',
    libraries: 'places'
  }
})

export default {
    mounted: function() {
      // some code here
    },

    methods: {

        dropMarker(data) {
            console.log('dropMarker');
            return myaddMarker(this, this.reportedCenter.lat, this.reportedCenter.lng);
        },

        // more methods
    },

    data () {
        return {
            // data here
        }
    },

    computed: {
        // some computed functions here
    },

    components: {
        'googleMap': VueGoogleMaps.Map,
        'MapMarker': VueGoogleMaps.Marker
    },
}

[vedovelli]

Quick question: does it work when you remove GoogleMaps package?!

[LarryEitel]

Same behavior with:

ParksMap.vue

<template>
  <div>

    <button v-on:click="alert('hello')"> DropMarker</button>

  </div>
</template>

<script src="./parksMap.js">
</script>

<style>
</style>

parksMap.js

export default {
    mounted: function() {},

    watch: {},

    methods: {},

    data () {
        return {}
    },
}

[vedovelli]

I'm gonna use your provided code to try to reproduce. Please hold!

[vedovelli]

[vedovelli]

It worked here.

[LarryEitel]

Ok, what I will do next is install vanilla and re-integrate my components, testing along the way, to see what is causing my problem.

I'll keep you posted. Currently cramming on a different project at the moment. :)

Thank you for checking my code. I apologize for the inconvenience.

[vedovelli]

No problema. I'm closing the issue! Good luck!

[LarryEitel]

@vedovelli I thought that you would appreciate learning what my problem ended up being.... The button I was experimenting with was BEHIND the "Fork me on Github" region. Even though I could 'see' and click on the button, the Fork link 'caught' the click!!!!!! :(