将相应的JS文件添加到新的Vue.js组件

Question

我正在学习Vue.js，到目前为止它确实非常棒，但我遇到了一个试图添加另一个JS文件的问题。 我有一个Navigation.vue文件，我正在尝试用它添加一个新的Vue实例到corrsponde，但我没有任何成功。

Navigation.js

new Vue({
  el: '#navigation',
  data: {
    active: 'home'
  },
  methods: {
    makeActive: function(item) {
      this.active = item;
    }
  }
});

Navigation.vue

<template>
  <div id="navigation">
    <nav v-bind:class="active" v-on:click.prevent>
        <a href="#" class="home" v-on:click="makeActive('home')">Home</a>
        <a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>
        <a href="#" class="services" v-on:click="makeActive('services')">Services</a>
        <a href="#" class="contact" v-on:click="makeActive('contact')">Contact</a>
    </nav>
  </div>
</template>

<script>
  export default {
  }
</script>

的application.js

import Vue from "vue/dist/vue.esm"
import App from '../app.vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify)

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('app'))
  const app = new Vue({
    el: 'app',
    template: '<App/>',
    components: {
      App
    }
  })

  console.log(app)
})

Navigation.js文件无法正常工作。 我想是因为我没有正确导入它，但我不确定？

错误：

Property or method "active" is not defined on the instance but 
referenced during render. Make sure that this property is reactive, 
either in the data option, or for class-based components, by 
initializing the property

Answer 1

我期望看到你的Navigation组件包含在你的App组件中。

App.vue

<template>
  <div>
    <Navigation/>
    <!-- there's probably more than just this -->
  </div>
</template>

<script>
import Navigation from 'path/to/Navigation.vue'

export default {
  // snip
  components: {
    Navigation
  }
  // snip
}
</script>

此外，组件数据应该是一个功能

Navigation.vue

<script>
export default {
  data () {
    return { active: 'home' }
  },
  methods: {
    makeActive (item) {
      this.active = item;
    }
  }
}
</script>

---

无需包含Navigation.js或为Navigation组件提供单独的Vue实例