Любое решение "Неизвестный пользовательский элемент:- Вы правильно зарегистрировали компонент? " - PullRequest
Новая
       2

Любое решение "Неизвестный пользовательский элемент:- Вы правильно зарегистрировали компонент? "

1 голос
/ 07 мая 2019

Имя определено во всех моих экземплярах компонентов с правильной заглавной буквой, но я все еще получаю ошибку, я обнаружил много подобных проблем в сети, но проблема всегда, кажется, с именем, однако я уверен на все 100%мои компоненты имеют точно такое же имя, как и те, что находятся в папке rout.js.У кого-нибудь есть идеи для возможных решений?Спасибо.

App.vue 

<template>
    <div id="app">
        <router-link to="/search"></router-link>
        <router-view> </router-view>
    </div>
</template>

<script>
    import Search from './components/Search.vue';
import Apod from './components/Apod.vue';
import News from './components/News.vue';
import NotFound from './components/NotFound.vue';
export default {
  name: 'app', 
  components: {
    NotFound: NotFound,
    Search: Search,
    Apod: Apod,
    News: News
  }
}
</script>

main.js 

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';

Vue.config.productionTip = false

new Vue({
    el: '#app',
    router: VueRouter,
    render: h => h(App),
}).$mount('#app')

index.js 

import Vue from 'vue';
import VueRouter from 'vue-router';
import Apod from '@/components/Apod';
import Search from '@/components/Search';
import News from '@/components/News';
import NotFound from '@/components/NotFound';

Vue.use(VueRouter)

export default new VueRouter({
    routes: [
    {
        path: '/apod',
        name: 'Apod',
        component: Apod,
    },
    {
        path: '/search',
        name: 'Search',
        component: Search,
    },
    {
        path: '/news',
        name: 'News',
        component: News,
    }
]
})

Search.vue 

<template>
<div class="search">
    <h2> Search: </h2>
    <h5>Home</h5>
    <form v-on:submit.prevent="getResult(query)">
        <input type="text" placeholder="search" v-model="query"/>
    </form>
    <div class="wrapper">
        <div class="results"  >
            <div class="row" v-for="(r, index) in Math.ceil(results.length / 4)" v-if="index <= 3">
                <span class="result" v-for="result in results.slice((r - 1) * 4, r * 4)">
                    <img :src="result.links[0].href" :alt="result.data[0].keywords[0]"/>
                    <p class="text"> {{ result.data[0].title }} </p>
                </span>
            </div>
        </div>
    </div>
</div>


import axios from 'axios';

export default {
name: 'Search',
data() {
    return {
        query: '',
        results: ''
    }
},
methods: {
    getResult(query) {
        axios.get('https://images-api.nasa.gov/search?q=' + query + '&media_type=image')
        .then(response => {
            this.results = response.data.collection.items;
            console.log(response);
        });
    }
}

}

1 Ответ

1 голос
/ 07 мая 2019

В основном вы должны написать: 

import Vue from 'vue'
import App from './App.vue'
import VueRouter from './path-to-your-router-init-file';

Vue.config.productionTip = false

new Vue({
    el: '#app',
    router: VueRouter,
    render: h => h(App),
}).$mount('#app')
...