时间戳

首页 > 解决方案 > 即使元素不在页面上，也会调用 VueJS 实例

javascript - 即使元素不在页面上，也会调用 VueJS 实例

问题描述

我面临一个问题，即使元素不在页面上，我的所有 VueJS 实例都被调用。

我有一个这样声明的mixin。

var mixin = {
  methods: {
    listEvents(parameters) { 
      return axios.get('/api/v1/events', {params: parameters})
    },
    listLocations(parameters) { 
      return axios.get('/api/v1/locations', {params: parameters})
    },
  }
}

还有多个使用这种混合的实例。如果你问为什么是多个实例，那是因为我在多个页面中使用了 VuejS。例如，我有一个列出事件的页面和一个列出位置的页面。所以我所有的方法都在 mixin 中，然后调用为页面创建的实例，因为页面包含实例中指定的元素（例如：id="locations" 和 el:"#locations"）

一个实例的示例：

// 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() {
...
...

但是，无论我在哪个页面上，都会调用所有实例……我可以看到所有 API 调用，传单地图已启动，但没有容器……这是一团糟。

我完全错过了什么或误解了吗？

编辑：我可以补充一点，所有实例都在其中app.js，并且app.js包含在所有页面中。

标签： javascriptvue.js

解决方案

听起来您在每个页面上都加载了一些脚本，实例化新的 Vue 对象，而不管这些 Vue 附加到的元素是否被渲染。

即使您实例化它的元素不存在，Vue 也会创建实例。

在这种情况下，您可以在创建 Vue.js 之前简单地检查元素是否存在。

const locations = document.querySelector("#locations")
if (locations) {
  new Vue({
    el: "#locations",
    ...
  })
}

推荐阅读