Vue警告:未知的自定义元素

时间:2017-07-17 13:29:04

标签: laravel vue.js vue-component

我有这个错误

app.js:3621 [Vue warn]: Unknown custom element: <addvideo> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我的add-video.blade.php

        <div class="panel panel-default">
        <div class="panel-heading">Add Video!</div>
        <div class="panel-body">
        <addVideo></addVideo>
    </div>

addVideo.vue

 <template lang="html">
  //template codes
</template>

<script>
export default {

  data(){

    return {
      errors:[],
      video : {
        name : '',
        rate : '',
        year : '',
        description : '',
        creator : '',
        director : '',
        writers : '',
        storyline : '',
        isMovie : '',
        season : ''
      }
    }


  },

  created(){
    this.fetchVideos();
  },

  methods:{
    fetchVideos(){
      axios.get('videos').then(response=>{

        this.video = response.data.video;
      });

    },
    addVideo(){

      axios.post('videos',this.videos).then(response =>{
        this.videos.push(response.data.video);
        this.video = {
          name : '',
          rate : '',
          year : '',
          description : '',
          creator : '',
          director : '',
          writers : '',
          storyline : '',
          isMovie : '',
          season : ''
        };
        console.log(response.data);
      },response=>{
          this.errors=response.data;
      });

    }

  }




}
</script>

<style lang="css">
</style>

app.js

import Vue from 'vue';
import Users from './components/Users.vue';
import Register from './components/Register.vue';
import addVideo from './components/addVideo.vue';




window.axios = require('axios');


const app = new Vue({
    el: '#app',
    components : { Users,Register,addVideo }
});

Laravel 5.4项目。我为不同的组件编写相同的代码。。代码工作其他组件。我认为没有语法错误。但我没有找到我的错。希望共享代码片段对你有用。

1 个答案:

答案 0 :(得分:5)

实际上,html标签不区分大小写,一切都降低了。请使用连字符表示法在模板中具有等效于addVideo的内容(只要它位于.php.html文件中):

<add-video></add-video>