Question

这是html代码。我试图使用vue.js调用此id，但无法得到它并显示警告。

                   <div id="SignesConcept">
                      <!-- Signes -->
                      <div class="row">
                        <div class="col-md-12">
                          <div class="box box-success">
                            <div class="box-header">
                              <h3 class="font-alt text-left">Signes</h3>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

Vue.js代码：

var SignesConcept = Vue.extend({
    el: '#SignesConcept',
    data: function(){
        return {
            show:true
        }
    },
})

router.map({
    '/SignesConcept':{
        component: SignesConcept
    } 
});

当我调用模板ID时没有问题但是当我试图在模板中调用div id时它不起作用。如果有人对它有任何想法。任何帮助赞赏。谢谢。

Answer 1

在模板标签内定义模板

<template id="SignesConcept"> 
  // Define your template here.
</template>

然后使用模板属性代替 el 从我们的组件选项中引用此模板。

＆＃13;

Vue.use(VueRouter)

var SignesConcept = Vue.extend({
  template: '#SignesConcept',
  data: function() {
    return {
      show: true
    }
  }
})

var App = {}

var router = new VueRouter()

router.map({
  '/SignesConcept': {
    component: SignesConcept
  }
})

router.start(App, '#app')

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.13/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script>

<div id="app">
  <a v-link="{ path: '/SignesConcept' }">Go to Signes</a>
  <router-view></router-view>
</div>

<template id="SignesConcept">
  <!-- Signes -->
  <div class="row">
    <div class="col-md-12">
      <div class="box box-success">
        <div class="box-header">
          <h3 class="font-alt text-left">Signes</h3>
        </div>
      </div>
    </div>
  </div>
</template>

＆＃13;

Vue.js＆＃34;＆＃34; el＆＃34; option应该是一个在组件定义中返回每个实例值的函数＆＃34;

1 个答案: