I am encountering an issue where all my VueJS instances are being executed, even if the element associated with them is not present on the page.
Currently, I have defined a mixin as follows:
var mixin = {
methods: {
listEvents(parameters) {
return axios.get('/api/v1/events', {params: parameters})
},
listLocations(parameters) {
return axios.get('/api/v1/locations', {params: parameters})
},
}
}
These mixins are used by multiple VueJS instances across different pages. Each page focuses on displaying either events or locations. The methods are stored in the mixin and then utilized by the specific instance created for that particular page, based on the presence of the specified element within it (e.g., id="locations" and el: "#locations").
Here's an example of one such instance:
// Vue
new Vue({
el: '#locations',
delimiters: ['[[', ']]'],
mixins: [mixin],
data: {
locations: [],
loading: true,
error: false,
page: 1,
perPage: 20,
},
mounted: function () {
console.log("VUEJS 'locations' has been mounted")
this.init();
},
methods: {
init() {
...
...
However, regardless of which page I am on, all instances seem to be triggered simultaneously. This results in unnecessary API calls, initialization of Leaflet maps without any container, creating chaos in the functionality.
Am I overlooking something crucial here or completely misinterpreting the behavior?
EDIT: It's worth noting that all instances are placed within `app.js`, which is included on all pages.