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

Vue.js "The "el" option should be a function that returns a per-instance value in component definitions"

本文关键字：定义 组件 返回 函数 实例 一个 选项 quot Vue js      更新时间：2023-09-26

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

                   <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内模板它不工作。如果有人有什么想法的话。感谢任何帮助。谢谢你。

在模板标签中定义模板

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

相关文章：