Vue js 2- Không thể gắn kết thành phần: template hoặc làm cho chức năng chưa xác định

Question

Tôi có một thành phần:

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

Tôi muốn sử dụng vue-mask-input plugin như một thành phần con:

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

này là toàn bộ thành phần:

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

Trước khi cập nhật lên Vue v.2.4.4 Tôi tiếp tục nhận được cảnh báo rằng đó là một fragmen t dụ:

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

Sau khi cập nhật các Vue để v.2.4.4 cảnh báo rằng đã ra đi, nhưng tôi có một lỗi mới:

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

found in 

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

Và đây là thành phần cha mẹ trên trang của mình:

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

thành phần cha mẹ này bao gồm trẻ này thành phần:

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

Tôi import Vue như vậy:

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

Và đây là cách tôi tạo Vue dụ:

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

Tôi đang làm gì sai, làm thế nào tôi có thể sửa lỗi này?

Answer 1

Bạn không thể chọn thẻ body làm phần tử chính bạn cần tạo div cho ví dụ vue của mình. Bạn cần tạo ví dụ vue như thế này;

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

Và tệp html của bạn sẽ trông như thế này;

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

Answer 2

Ref: vue-masked-input, cho thấy đóng cửa với />

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

nhưng bạn không có dấu gạch chéo tự chặt chẽ, hoặc một thẻ đóng ...

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