[Vuejs]-Variable is not defined – VueJS

by

2👍

✅

  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.

👤Amresh Venugopal

Leave a comment