Vue js 2- Nie udało się zamontować komponent: szablonu lub uczynić funkcję niezdefiniowane

Mam komponent:Vue js 2- Nie udało się zamontować komponent: szablonu lub uczynić funkcję niezdefiniowane

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

chciałbym użyć vue-mask-input plugin jako składnik dziecko:

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

ten jest cały komponent:

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

Przed aktualizacją do Vue v.2.4.4 otrzymywałem ostrzeżenie, że jest to fragmen t instancja:

[Vue warn]: Attributes "v-model", "mask", "placeholder" are ignored on component because the component is a fragment instance:

Po zaktualizowaniu Vue do v.2.4.4 że ostrzeżenie nie było, ale mam nowy błąd:

[Vue warn]: Failed to mount component: template or render function not 
defined. 

found in 

---> <MaskedInput> 
     <PlayerInfo> 
      <Player> 
      <Root>

I to jest składnikiem dominującym na mojej stronie:

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

Ten komponent składa się z rodzicem tej elementów podrzędnych:

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

jestem importowania Vue tak:

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

I to jak tworzę Vue instancję:

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

Co robię źle, jak mogę rozwiązać ten problem?

Źródło

2017-09-28 Leff

może to ponieważ nie zamykasz znacznika komponentu ''? – thanksd

Próbowałem również zamknąć, ale pojawił się ten sam błąd. – Leff

Nie mogę tego odtworzyć. Jakiej wersji 'vue-masked-input' używasz? – thanksd

Nie można wybrać znacznika body jako głównego elementu, który jest potrzebny do utworzenia elementu div dla instancji vue. Musisz stworzyć instancję vue w ten sposób;

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

A twój plik HTML powinien wyglądać tak:

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

Źródło

2017-09-30 08:43:15

Nadal dostaję maskę wprowadzania jako fragment – Leff

' w tej części twojego szablonu, nie wydajesz poprawnie "maski" proponu. W tej linii należy dodać kolumnę przed "maską", aby wysłać ją jako własność vue do komponentu potomnego ': mask = ...' –

Tak to jest opisane w dokumentacji wtyczki, jak go używać: https://niksmr.github.io/vue-masked-input/ Poza tym nie otrzymuję błędu właściwości, otrzymuję fragment błąd wystąpienia. – Leff

Ref: vue-masked-input, pokazuje zamknięcie z />

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

ale nie mają samodzielne blisko ukośnik lub znacznik zamykający ...

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

Źródło

2017-10-05 09:02:52

Vue js 2- Nie udało się zamontować komponent: szablonu lub uczynić funkcję niezdefiniowane

Odpowiedz

Powiązane problemy