Adding corresponding JS file to a new Vue.js component

Question

I'm learning Vue.js and it's been really awesome so far but I ran into a problem trying to add another JS file. I have a Navigation.vue file and I'm trying to add a new Vue instance to corrsponde with it, but I'm not having any success.

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)
})

The Navigation.js file isn't working. I think it's because I haven't imported it right, but I'm not sure?

ERROR:

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

You don't typically create a new Vue instance for components. I'd expect to see your Navigation component included in your App component — Phil
– Phil, Commented Jan 31, 2018 at 23:54

Phil · Accepted Answer · 2018-02-01 00:05:39Z

2

What I'd expect to see is your Navigation component included in your App component.

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>

Also, component data should be a function

Navigation.vue

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

There's no need to include Navigation.js or have a separate Vue instance for your Navigation component

edited Feb 1, 2018 at 0:05

answered Jan 31, 2018 at 23:59

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding corresponding JS file to a new Vue.js component

Navigation.js

Navigation.vue

Application.js

ERROR:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Navigation.js

Navigation.vue

Application.js

ERROR:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related