admin 管理员组

文章数量: 1086019

I have a ponent:

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

I would like to use the vue-mask-input plugin as a child ponent:

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

This is the whole ponent:

<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: '',
          }
      },
      puted: {
          link() {
            return `/player/info/edit/${this.player.id}`;
          }
      },
      ponents: {
        MaskedInput
      }
  }
</script>

Before updating to Vue v.2.4.4 I kept getting warning that it is a fragment instance:

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

After updating the Vue to v.2.4.4 that warning was gone, but I got a new error:

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

 found in

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

And this is the parent ponent on my page:

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

This parent ponent consists of this child ponents:

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

I am importing the Vue like so: 

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

And this is how I create Vue instance:

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

What am I doing wrong, how can I fix this?

I have a ponent:

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

I would like to use the vue-mask-input plugin as a child ponent:

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

This is the whole ponent:

<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: '',
          }
      },
      puted: {
          link() {
            return `/player/info/edit/${this.player.id}`;
          }
      },
      ponents: {
        MaskedInput
      }
  }
</script>

Before updating to Vue v.2.4.4 I kept getting warning that it is a fragment instance:

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

After updating the Vue to v.2.4.4 that warning was gone, but I got a new error:

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

 found in

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

And this is the parent ponent on my page:

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

This parent ponent consists of this child ponents:

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

I am importing the Vue like so: 

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

And this is how I create Vue instance:

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

What am I doing wrong, how can I fix this?

  • javascript
  • vue.js
  • vue-ponent
Share Improve this question edited Oct 2, 2017 at 16:53 Leff asked Sep 28, 2017 at 6:02 LeffLeff 1,44031 gold badges111 silver badges226 bronze badges 5
  • Could it be because you're not closing the <masked-input> ponent tag? – thanksd Commented Sep 28, 2017 at 12:48
  • I have tried with closing it as well, but the same error appeared. – Leff Commented Sep 28, 2017 at 12:52
  • I'm not able to reproduce this. What version of vue-masked-input are you using? – thanksd Commented Oct 2, 2017 at 16:58
  • "_from": "vue-masked-input@latest", "_id": "[email protected]", "_inCache": true, "_location": "/vue-masked-input", "_nodeVersion": "6.9.2", – Leff Commented Oct 2, 2017 at 17:07
  • 1 Do you have a fiddle so we can experiment with a solution? – altShiftDev Commented Oct 6, 2017 at 16:26
Add a ment  | 

3 Answers 3

Reset to default 1

You can not select body tag as the main element you need to create a div for your vue instance. You need to create vue instance like this;

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

And your html file should look like this;

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

Ref: vue-masked-input, shows closing with />

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

but you don't have the self-close slash, or a closing tag...

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

This can also occur when there is a ponent, which exists, imported and referenced in the ponents but not used in the template

...
</template>

<script>
import UnusedComponent from '@/Shared/UnusedComponent .vue'

export default {
  ponents: { 
      UnusedComponent ,
    },

removing the unused ponent import and reference will fix it

本文标签： javascriptVue js 2 Failed to mount component template or render function not definedStack Overflow

版权声明：本文标题：javascript - Vue js 2- Failed to mount component: template or render function not defined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744080312a2530116.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。