vue.js - 如何在同一个 .js 文件上创建多个 Vue 实例？

Question

我正在尝试将两个 Vue.js 实例添加到同一个 .js 文件中，如下所示:

new Vue({
  el: '#step1',
  data: {
    value1: '',
  }
})


new Vue({
  el: '#step2',
  data: {
    value2: '',
  }
})

我在两个单独的网页中调用这两个实例。但是我收到 Vue 警告，例如 [Vue warn]: Cannot find element: #step1 not found 或 [Vue warn]: Cannot find element: #step2 not成立。我做错了吗？或者有什么方法可以将这两个实例连接在一起？

Answer 1

如果你必须这样设计你的代码，你可以在实例化 Vue 实例之前先测试该元素是否在该页面上:

if( document.getElementById("step1") ) {
    new Vue({
      el: '#step1',
      data: {
        value1: '',
      }
    })
}

if( document.getElementById("step2") ) {
    new Vue({
      el: '#step2',
      data: {
        value2: '',
      }
})