编辑

Question

有没有一种使用vue的方法来检查应安装vue实例的元素是否确实存在？在某些情况下，此元素将不存在，并希望避免出现此类错误：

[Vue warn]: Cannot find element: #app
[Vue warn]: Error in created hook: "TypeError: Cannot convert undefined or null to object"
TypeError: this.$store.getters[(this.namespace...

情况是：我希望能够在安装vue之前检查该元素是否确实存在。如果没有元素，请勿尝试安装。

Answer 1

只需使用Vanilla JS来检查现有标签。

const storeMounted = new Vuex.Store({
  state: {
    string: "Store mounted"
  }
})

if (document.getElementById('app')) {
  new Vue({
    el: "#app",
    store: storeMounted,
    computed: {
      string() {
        return this.$store.state.string
      }
    },
    mounted() {
      console.log('Mounted to #app')
    }
  })
}

const storeNotMounted = new Vuex.Store({
  state: {
    string: "Store not mounted"
  }
})

if (document.getElementById('noApp')) {
  new Vue({
    el: "noApp",
    store: storeNotMounted,
    mounted() {
      console.log('Mounted to #noApp')
    }
  })
}

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">{{string}}</div>

在上面的代码片段中，您可以看到控制台中没有错误，在具有适当ID的<div>中安装了一个 Vue 实例，而另一个未安装

Vue非常有用-但这是“唯一的” JavaScript：D

编辑

我添加了Vuex，因此您可以看到它不会引起任何问题。

如何有条件地挂载root vue实例？

1 个答案:

编辑