vuejs vue props example event component javascript vue.js vue-component

javascript - props - Vue js 2- Error al montar el componente: la plantilla o la función de representación no están definidas



vue props (2)

Tengo un componente:

<player-info :data="player"></player-info>

Me gustaría usar el complemento vue-mask-input como componente secundario:

<masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date">

Este es todo el componente:

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

Antes de actualizar a Vue v.2.4.4, seguí recibiendo advertencias de que se trata de una instancia de fragmento:

[Vue warn]: los atributos "v-model", "mask", "placeholder" se ignoran en el componente porque el componente es una instancia de fragmento:

Después de actualizar Vue a v.2.4.4, esa advertencia desapareció, pero recibí un nuevo error:

[Vue warn]: Failed to mount component: template or render function not defined. found in ---> <MaskedInput> <PlayerInfo> <Player> <Root>

Y este es el componente padre en mi página:

<div><player :player="{{ $player }}" :videos="{{ $videos }}"></player></div>

Este componente principal consta de estos componentes secundarios:

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

Estoy importando el Vue así:

import Vue from ''vue/dist/vue''; window.Vue = Vue;

Y así es como creo la instancia de Vue:

const app = new Vue({ el: ''body'', data: window.videoApp });

¿Qué estoy haciendo mal, cómo puedo solucionar esto?


No puede seleccionar etiqueta de cuerpo como el elemento principal que necesita para crear un div para su instancia de vue. Necesitas crear una instancia de vue como esta;

const app = new Vue({ el: ''#app'', data: { // Some data... }, methods: { // Your methods... } })

Y tu archivo html debería verse así;

... <body> <div id="app"> <!-- Vue instance selects and creates components in this div --> </div> </body>


Ref: vue-masked-input , muestra cierre con />

<div><masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date" /></div>

pero no tienes una barra o barra de cierre automático ...

<div><masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date"></div>