![](/img/trans.png)
[英]Vue.js Failed to mount component: template or render function not defined
[英]Vue js 2- Failed to mount component: template or render function not defined
我有一个组件:
<player-info :data="player"></player-info>
我想使用vue-mask-input 插件作为子组件:
<masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date">
这是整个组件:
<template>
<div id="info" class="player-info-card-content section-card">
<div class="row">
<div class="col-12">
<h5 class="section-title"><i class="ion-ios-list-outline title-icon"></i> Overview</h5>
<button @click="edit = !edit" class="button edit-button-wrapper">
<i v-if="!edit" class="ion-edit edit-button"></i>
<i v-if="edit" class="ion-close edit-button"></i>
</button>
<hr class="info-title-hr">
</div>
</div>
<div class="row info-content">
<div class="col-12">
<div class="row">
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Born</span>
<p v-if="!edit">{{ player.birthday }}</p>
<!--
<input v-if="edit" type="text" v-mask="'999.999.999-99'">
<input class="info-data-input" v-if="edit" name="birthday" v-model="player.birthday" value="{{ player.birthday }}">
-->
<div><masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date"></div>
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Club</span>
<p v-if="!edit">{{ player.club }}</p>
<input class="info-data-input" v-if="edit" name="club" v-model="player.club" value="{{ player.club }}">
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Position</span>
<p v-if="!edit">{{ player.position }}</p>
<input class="info-data-input" v-if="edit" name="position" v-model="player.position" value="{{ player.position }}">
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Height</span>
<p v-if="!edit">{{ player.height }} <span v-if="player.height != ''"></span></p>
<input class="info-data-input" v-if="edit" name="height" v-model="player.height" value="{{ player.height }}">
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Weight</span>
<p v-if="!edit">{{ player.weight }} <span v-if="player.weight != ''">kg</span></p>
<input class="info-data-input" v-if="edit" name="weight" v-model="player.weight" value="{{ player.weight }}">
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Foot</span>
<p v-if="!edit">{{ player.foot }}</p>
<input class="info-data-input" v-if="edit" name="foot" v-model="player.foot" value="{{ player.foot }}">
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Agent</span>
<p v-if="!edit">{{ player.agent }}</p>
<input class="info-data-input" v-if="edit" name="agent" v-model="player.agent" value="{{ player.agent }}">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row sub-section">
<div class="col-12">
<h5 class="title-margin section-title">
<i class="ion-ios-stopwatch-outline title-icon"></i>
Athletic performance
</h5>
<hr class="info-title-hr">
</div>
</div>
<div class="row info-content">
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">40m time</span>
<p class="lg-strong-font">4.3<span>s</span></p>
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">100m time</span>
<p class="lg-strong-font">11.1<span>s</span></p>
</div>
</div>
</div>
<div class="col-6 col-md-3 player-info-data">
<div class="row">
<div class="col-12 info-box">
<span class="info-label">Vertical jump</span>
<p class="lg-strong-font">65<span>cm</span></p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import MaskedInput from 'vue-masked-input';
export default {
props: ['data'],
data () {
return {
player: this.data.data,
edit: false,
date: '',
}
},
computed: {
link() {
return `/player/info/edit/${this.player.id}`;
}
},
components: {
MaskedInput
}
}
</script>
在更新到 Vue v.2.4.4 之前,我一直收到警告说它是一个片段实例:
[Vue warn]: 属性“v-model”、“mask”、“placeholder”在组件上被忽略,因为组件是片段实例:
将 Vue 更新到 v.2.4.4 后警告消失了,但我收到了一个新错误:
[Vue warn]: Failed to mount component: template or render function not
defined.
found in
---> <MaskedInput>
<PlayerInfo>
<Player>
<Root>
这是我页面上的父组件:
<div><player :player="{{ $player }}" :videos="{{ $videos }}"></player></div>
此父组件由以下子组件组成:
<template>
<div class="row">
<div class="col-md-3">
<div>
<player-card :data="player"></player-card>
</div>
</div>
<div class="col-md-9">
<div>
<player-info :data="player"></player-info>
</div>
<div>
<player-videos :data="videos"></player-videos>
</div>
<div>
<player-stats :player="player.data.seasons"></player-stats>
</div>
</div>
</div>
</template>
我像这样导入 Vue:
import Vue from 'vue/dist/vue';
window.Vue = Vue;
这就是我创建 Vue 实例的方式:
const app = new Vue({
el: 'body',
data: window.videoApp
});
我做错了什么,我该如何解决?
您不能选择body标签作为为vue实例创建div所需的主要元素。 你需要像这样创建vue实例;
const app = new Vue({
el: '#app',
data: {
// Some data...
},
methods: {
// Your methods...
}
})
你的html文件看起来应该是这样的;
...
<body>
<div id="app">
<!-- Vue instance selects and creates components in this div -->
</div>
</body>
参考: vue-masked-input ,用/>显示结束
<div><masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date" /></div>
但你没有自我关闭的斜线或结束标签......
<div><masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date"></div>
当存在一个组件时,也会发生这种情况,该组件在组件中存在、导入和引用但未在模板中使用
...
</template>
<script>
import UnusedComponent from '@/Shared/UnusedComponent .vue'
export default {
components: {
UnusedComponent ,
},
删除未使用的组件导入和引用将修复它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.