Question

我想问一下，为什么变量title得到一个未定义的错误，即使它有一个值。到目前为止，这是我的代码：

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

Answer 1

以下html id #test-app vue-instance从代码的new Vue(...)部分派生title个属性。这真的没有<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>，因而错误。
```
el
```
new Vue(...)中的mount属性指定了您正在创建的new Vue()个实例的Vue.component(...)点。
在Vue.component('test-empower', { template: '#test-empower' });：
中
```
#test-empower
```
<test-empower>不是您所期望的挂载点。当您的应用程序中使用dplyr时，该组件必须使用该模板。

根据修改，您需要将模板分开，以解决您在此fiddle中拥有单独属性的需求。

变量未定义 - VueJS

1 个答案: