Vue.js「」el「選項應該是一個函數，它在組件定義中返回每個實例的值」

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的從您對我們組件選項引用此模板。

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')

<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>