Vue JS dynamic content based on link

Question

I am totally newbie with Vueand I am trying to figure out how can I render dynamic content based on link click. I am getting an error message: Property or method "setLink" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Here is my VUE code:

Vue.component('navigation', {
            template: '#navigation'
        })

        Vue.component('home', {
            template: '#home'
        })

        Vue.component('about', {
            template: '#about'
        })

        var app = new Vue({
            el: '#app',

            component: {
                navigation
            },


            data: {
                currentView: 'home'
            },

            methods: {
                setLink: function(link) {
                    this.currentView = link;
                }
            }
        })

and I have div with id app:

<div id="app">
        <navigation></navigation>
        <div class="container">
            <componet :is="currentView"></component>    
        </div>
    </div>

In navigation I have a tag with v-on:click="setLink('someLink')" function. Maybe someone knows where the issue could be? Thank you

You need to define a setLink method in your navigation component. Even though that component's tag is within #app, it doesn't have references to the main #app component's methods — thanksd

thanksd thanksd · Accepted Answer · 2017-06-01T20:59:52

Your navigation component doesn't have a method called setLink, but you are referencing a setLink method in that component's template. That's why you're getting that error.

If you're trying to change the main component's currentView property, you can instead emit an event (say changeView) from the navigation component when a link is clicked:

<div v-on:click="$emit('changeView', 'someLink')"></div>

Then, listen for that event in the main component's scope, on the tag for your navigation component:

<navigation v-on:changeView="setLink($event)"></navigation>

Here, the $event variable is what got sent as the value of the changeView event ('someLink' in the example).

Vue JS dynamic content based on link

1 Answers