Javascript Vue js 2-未能装载组件：未定义模板或渲染函数

我有一个组成部分：

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

<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实例的方式：

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...
  }
})

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

你的html文件应该是这样的

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

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

。。。

Ref:，显示以/>

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

可能是因为您没有关闭

组件标记吗？我也尝试过关闭它，但出现了相同的错误。我无法重现此错误。您使用的是什么版本的

vue屏蔽输入？
“\u from”：“vue屏蔽”-input@latest“，”_id:“vue屏蔽”-input@0.5.2“，“\u inCache”：true，“\u位置”：“/vue屏蔽输入”，“\u节点转换”：“6.9.2”，
你有小提琴吗？这样我们就可以试验解决方案了吗？我仍然将输入掩码作为片段
在模板的这一部分，我想你没有正确发送道具掩码。这一行您需要在“mask”之前添加列，将其作为vue属性发送到子组件
：mask=…
，这就是插件文档中关于如何使用它的描述：此外，我没有得到属性错误，我得到的是片段实例错误。
<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>