Even though the name is correctly capitalized in all my component instances, I am still encountering an error. After researching similar issues online, it appears that the problem usually revolves around naming discrepancies. However, I have double-checked and confirmed that all my components have identical names to those listed in the routes.js folder. Any suggestions for potential solutions would be greatly appreciated. Thank you.
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);
});
}
}
}