CODEWITHSUNDEEP
vue.jsvuejs2
Sydney Loteria
Sydney Loteria

Reputation: 10441

Variable is not defined - VueJS

I would like to ask, on why the variable title is getting an undefined error even though there's a value on it. Here's my code so far:

   <div class="echelon-main-container" id="test-app">
        <test-empower></test-empower>
        <script type="x-template" id="test-empower">
            <section class="test-empower" id="test-empower">
                <h2 class="header-title">{{ title }}</h2>
                <h2 class="header-subtitle">{{ description }}</h2>
            </section>
        </script>
    </div>

Vue.component('echelon-empower', {
    template: '#echelon-empower',
    data: function() {
        return {
            title: "AT ECHELON",
            description: "Empowering Entrepreneurs to build and grow their companies since 2009"
        }
    }
});

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

Vue.component('echelon-who-attends',{
    template: '#echelon-who-attends'
});

Vue.component('echelon-highlights', {
    template: '#echelon-highlights'
});

new Vue({
    el: "#echelon-app"
});

Upvotes: 0

Views: 10357

Answers (1)

Amresh Venugopal
Amresh Venugopal

Reputation: 9549

  1. The below html which has an id of #test-app derives its vue-instance properties from the new Vue(...) part of the code. Which really doesn't have title and hence the error.

    <div class="echelon-main-container" id="test-app">
    <test-empower></test-empower>
    <script type="x-template" id="test-empower">
        <section class="test-empower" id="test-empower">
            <h2 class="header-title">{{ title }}</h2>
            <h2 class="header-subtitle">{{ description }}</h2>
        </section>
    </script>
</div>

  2. The el property in the new Vue(...) specifies the mount point for the new Vue() instance you are creating.

  3. In the Vue.component(...):

    Vue.component('test-empower', {
  template: '#test-empower'
});

    #test-empower is not the mount point as you are expecting. It is the template this component must use when <test-empower> is used in your application.

As per the edit, you need to separate out your templates to resolve your need of having separate properties like in this fiddle.

Upvotes: 2

Related Questions