Unable to access Vue component method beyond its scope

Question

Unable to access Vue component method beyond its scope

Having an issue with my Vue component that I'm trying to call a method from outside its wrapper element #app. Is there a way to register the component so I can easily call it like Component.function();

var viewController = new Vue({
  el: "#app",
  data: {},
  methods: {
    action: function() {
      alert("function called successfully");
    }
  }
});

HTML:

<div id="app">

</div>

<a @click="viewController.action()">Click me!</a>

Fiddle: https://jsfiddle.net/queeeeenz/Lja7pake/198/

javascript vue.js

Answer 1

Answer №1

After some experimentation, I discovered the following:

It appears that using @ in elements outside of a Vue element may not work as expected.
The declaration var viewModel does not seem to be connected to the window object.

Despite these challenges, I was able to successfully run the code.

JavaScript

window.viewModel = new Vue({
  el: "#app",
  data: {},
  methods: {
    test: function() {
      alert("test fuction called");
    }
  }
});

HTML

<div id="app">

</div>

<a onClick="viewModel.test()">Click me!</a>

Answer 2

After some experimentation, I discovered the following:

It appears that using @ in elements outside of a Vue element may not work as expected.
The declaration var viewModel does not seem to be connected to the window object.

Despite these challenges, I was able to successfully run the code.

JavaScript

window.viewModel = new Vue({
  el: "#app",
  data: {},
  methods: {
    test: function() {
      alert("test fuction called");
    }
  }
});

HTML

<div id="app">

</div>

<a onClick="viewModel.test()">Click me!</a>

Answer 3

Answer №2

Initially, it appears that you are applying a click handler in the "Vue" manner, even though it is not actually within a Vue component. This approach will not be effective.

To properly achieve your desired outcome, you must expose your function to a different scope by assigning it to a window attribute.

var viewModel = new Vue({
  el: "#app",
  data: {},
  created () {
    // The function is now accessible
    window.test = this.test;
  },
  methods: {
    test: function() {
      alert("test function called");
    }
  }
});

// Later on
window.test();

A more optimal solution would be to utilize a global event bus. Instead of exposing arbitrary functions globally, you can create a bus for communication. This allows for emitting events within the Vue application using this.$bus.$emit('...') and listening to them throughout the application. By employing a defined interface between the internal and external parts of the Vue application, unnecessary exposure of functions in the global scope is avoided, enabling better control over interactions with the application from outside sources.

import Vue from 'vue';
export const bus = new Vue();

// In another file
import { bus } from './bus';
Vue.prototype.$bus = bus;

// External code usage
import { bus } from '../../my-vue-application/bus';
bus.$emit('test');

// Within a component
var viewModel = new Vue({
  el: "#app",
  data: {},
  created () {
    this.$bus.$on('test', this.test);
  },
  beforeDestroy () {
    this.$bus.$off('test', this.test);
  },
  methods: {
    test: function() {
      alert("test function called");
    }
  }
});

Answer 4

Initially, it appears that you are applying a click handler in the "Vue" manner, even though it is not actually within a Vue component. This approach will not be effective.

To properly achieve your desired outcome, you must expose your function to a different scope by assigning it to a window attribute.

var viewModel = new Vue({
  el: "#app",
  data: {},
  created () {
    // The function is now accessible
    window.test = this.test;
  },
  methods: {
    test: function() {
      alert("test function called");
    }
  }
});

// Later on
window.test();

A more optimal solution would be to utilize a global event bus. Instead of exposing arbitrary functions globally, you can create a bus for communication. This allows for emitting events within the Vue application using this.$bus.$emit('...') and listening to them throughout the application. By employing a defined interface between the internal and external parts of the Vue application, unnecessary exposure of functions in the global scope is avoided, enabling better control over interactions with the application from outside sources.

import Vue from 'vue';
export const bus = new Vue();

// In another file
import { bus } from './bus';
Vue.prototype.$bus = bus;

// External code usage
import { bus } from '../../my-vue-application/bus';
bus.$emit('test');

// Within a component
var viewModel = new Vue({
  el: "#app",
  data: {},
  created () {
    this.$bus.$on('test', this.test);
  },
  beforeDestroy () {
    this.$bus.$off('test', this.test);
  },
  methods: {
    test: function() {
      alert("test function called");
    }
  }
});

Unable to access Vue component method beyond its scope

Answer №1

Answer №2

Similar questions

What is the proper way to access object properties in EJS?

Is PHP loaded prior to the `html body`?

Exploring the getJSON function within jQuery

When attempting to upload a file in Vue Apollo, a Node crash occurs with the error message "Maximum call stack size

Encountering a Module not found error with a ValidationError when trying to import an SVG file within a React

Encountered a connection error while attempting to establish a connection in Node.js

The scrolling event on the div is not triggering

Concealing empty rows within a vertical v-data-table using Vue

Using jQuery's ajax function to send data with a variable name of data field

Stop horizontal overflow of content

Is there a way to display customized values on a particular column in a Vuetify table?

Using Express to request data from Mongo database and only receiving the path

Adding non-reactive elements to reactive ones in VueORCombining static and dynamic components in

JavaScript Date displaying the string in the format YYYY/MM/DD HH:MM

Only function components can utilize hooks within their body. The useState functionality is currently not functioning as expected

Utilize the ng-controller directive with unique aliases across various sections of HTML code

Is there a different alternative to @JavascriptInterface in Android WebView?

Utilizing AJAX to send an array of data in JSON format

Join the geomarkers in two datasets using connecting lines

How can you efficiently update another ng-model value based on a select input in AngularJS using ng-change?