2017-09-28 14 views
17

मैं एक घटक है:Vue js 2- माउंट करने के लिए घटक विफल: टेम्पलेट या प्रस्तुत करना फ़ंक्शन मौजूद नहीं

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

यह:

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

मैं एक बच्चे के घटक के रूप में vue-mask-input plugin उपयोग करना चाहते हैं पूरे घटक है:

<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 को अद्यतन करने से पहले मैं चेतावनी है कि यह एक fragmen है हो रही है टी उदाहरण:

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

कि चेतावनी v.2.4.4 को Vue अद्यतन करने के बाद चला गया था, लेकिन मैं एक नया त्रुटि मिली:

[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 
}); 

क्या मैं गलत कर रहा हूँ, मैं इसे ठीक कर सकते हैं?

+0

यह किया जा सका क्योंकि आप '<मुखौटा-इनपुट>' घटक टैग बंद नहीं कर रहे हैं? – thanksd

+0

मैंने इसे बंद करने का भी प्रयास किया है, लेकिन वही त्रुटि दिखाई दी। – Leff

+0

मैं इसे पुन: उत्पन्न करने में सक्षम नहीं हूं। आप 'vue-masked-input' का किस संस्करण का उपयोग कर रहे हैं? – thanksd

उत्तर

1

आप अपने मूल उदाहरण के लिए एक 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> 
+0

मुझे अभी भी आपके टेम्पलेट के इस हिस्से में एक टुकड़ा – Leff

+0

'

' के रूप में इनपुट मास्क मिलता है, तो आप अनुमान लगाते हैं कि आप उचित रूप से प्रोप 'मास्क' नहीं भेज रहे हैं। इस पंक्ति को आपको 'मास्क' से पहले कॉलम जोड़ने की आवश्यकता है ताकि इसे बच्चे घटक के लिए एक वू प्रॉपर्टी के रूप में भेजा जा सके ': mask = ...' –

+0

इस तरह प्लगइन के दस्तावेज़ों में इसका वर्णन कैसे किया जाता है: https://niksmr.github.io/vue-masked-input/ इसके अलावा, मुझे कोई संपत्ति त्रुटि नहीं मिल रही है, मुझे खंड मिल रहा है उदाहरण त्रुटि – Leff

1

रेफरी: 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> 
संबंधित मुद्दे