Vue.js““el”选项应该是一个在组件定义中返回每个实例值的函数”答案

【问题标题】：Vue.js "The "el" option should be a function that returns a per-instance value in component definitions"Vue.js““el”选项应该是一个在组件定义中返回每个实例值的函数”
【发布时间】：2016-11-04 12:50:32
【问题描述】：

这里是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 时它不起作用。如果有人对此有任何想法。任何帮助表示赞赏。谢谢。

【问题讨论】：

你为什么要为一个组件定义el（理论上它可以存在多次）？请改用<router-view>。
我正在使用路由器视图。但是要调用 id，我使用了 el:'Div Id'。路由器地图将在路由器视图中调用它
为什么需要调用id？我真的不确定你想用 id 做什么。
这是我有许多不同模板的东西，在模板内我有访问 div 的链接。因此，当我单击该链接时，我可以直接访问该 div。
那你为什么需要设置el呢？

标签： javascript html vue.js

【解决方案1】：

在模板标签中定义你的模板

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

然后使用 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>

【讨论】：