Почему я получаю сообщение об ошибке [Неизвестный пользовательский элемент: правильно ли вы зарегистрировали компонент?] При попытке вложить локальные компоненты? - PullRequest
Новая
       21

Почему я получаю сообщение об ошибке [Неизвестный пользовательский элемент: правильно ли вы зарегистрировали компонент?] При попытке вложить локальные компоненты?

0 голосов
/ 01 мая 2019

Я новичок в Vue и немного пытаюсь организовать свое приложение.У меня изначально было 2 компонента: PageTable и PageRow.Когда они вложенные, они работали просто отлично.Однако, когда я использую PageTable с новым компонентом Title в AllPages, я получаю сообщение об ошибке: 

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

found in

---> <AllPages>
       <Root>

------------------------

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

found in

---> <AllPages>
       <Root>

Любая помощь, указывающая мне в правильном направлении, будет потрясающей.

Файл JS 

//Components:
var AllPages = {
  components: {
    'page-title': Title,
    'page-table': PageTable
  },
  template: `
    <div class="container">
      <page-title></page-title>
      <div class="table-responsive-sm" id="pageChart">
          <page-table></page-table>
      </div>
    </div>
  `
}

var Title = {
  name: 'page-title',
  props: {
    title: String
  },
  template: `
    <div class="row">
      <div class="row">
        <div class="col">
          <h1>{{ title }}:</h1>
        </div>
      </div>
    </div>
  `
}

var PageTable = {
  data: function() {
    return{
      pages: []
    }
  },
  mounted: function() {
    this.fetchPages();
  },
  methods: {
    fetchPages: function(e) {
        this.pages = [];
        var self = this;

        console.log('beginning function');

        var xhttp = new XMLHttpRequest();

        xhttp.onreadystatechange = function() {

          // For a successful response
          if (this.readyState == 4 && this.status == 200) {
            var response = JSON.parse(this.responseText);
            console.log(response);
            self.pages = response.data;

            }
          };

        xhttp.open('GET', this.$parent.createReqURL('admin/videos/all/'), true);
        xhttp.send(); //Data needs to be sent in string format (content type set above)
      },
      editPage: function(query){
        console.log(query);
        window.location.href = '../admin/create.html?' + query;
      },
      loadDetails: function(){

      }
    },
    components: {
      'page-row': PageRow
    },
    template:`
    <table class="table table-striped table-hover">
      <thead>
        <tr class="row">
          <th class="col">Slug</th>
          <th class="col">Artist Name</th>
          <th class="col">Tour</th>
          <th class="col-sm-1 alignCenter">Edit</th>
          <th class="col-sm-1 alignCenter">Details</th>
        </tr>
      </thead>
      <tbody>
        <page-row
          v-for="page in pages"
          v-bind:key="page.slug"
          v-bind:page="page">
        </page-row>
      </tbody>
    </table>
    `
}

var PageRow = {
  props: ['page'],
  template: `
  <tr class="row">
    <td class="col"><a href="https://exclusive.livenation.com/" target=_blank>{{ page.slug }}</a></td>
    <td class="col">{{ page.artist }}</td>
    <td class="col">{{ page.tour }}</td>
    <td class="col-sm-1 alignCenter icon"><img src="styles/images/icon_edit.svg" alt=""></td>
    <td class="col-sm-1 alignCenter icon"><img src="styles/images/icon_info.svg" alt=""></td>
  </tr>
  `
}


//App
var app = new Vue({
  el: '#app',
  data: {
    currentComponent: 'all-pages',
  },
  components: {
    'all-pages': AllPages,
  },
  mounted: function(){
  },
  methods: {
    createReqURL: function(path) {
      var baseURL = 'http://localhost:3000/';
      return baseURL + path;
    }
  }
});

Вот мой HTML : 

<body>
    <div id="app">
      <universal-header></universal-header>
      <component :is="currentComponent"></component>
      <universal-footer></universal-footer>

    </div>
</body>

1 Ответ

0 голосов
/ 01 мая 2019

Импортируйте и добавьте компонент в раздел компонентов или зарегистрируйте его глобально.

Похоже, вы уже добавили PageRow

components: {
      'page-row': PageRow
    },

В свой компонент Vue 

// import if not defined locally
import PageTable from '@/components/PageTabe.vue'

{ 
 components:{PageTable, 'page-row': PageRow},
}

Или глобально: 

Vue.component('PageTable', PageTable)
Vue.component('PageTitle', PageTitle)
Vue.component('PageRow', PageRow)

См. https://vuejs.org/v2/guide/components-registration.html

...