Question

我遇到一个问题，即使该元素不在页面上，我的所有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中，然后调用为该页面创建的实例，因为该页面包含实例中指定的 element （例如：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包含在所有页面中。

Answer 1

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

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

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

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

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

1 个答案: