So I'm trying to create a drop down with different selections that once selected it will update the api fetch method and display the correct API. I have written a function that to my understanding should do it but nothing. At one point I had it at least half working...
Here is the page i'm trying to work on.
pls help D:
<template lang="html">
<div>
<h1>News</h1>
<select >
<option v-on:change="handleSelect" :value="bitcoin">Bitcoin</option>
<option v-on:change="handleSelect" :value="tech">Tech</option>
</select>
<div class="main-container">
<article-list :articles='theNews'></article-list>
<article-detail :article='selectedArticle'></article-detail>
</div>
</div>
</template>
<script>
import ArticleList from './components/ArticleList.vue';
import ArticleDetail from './components/ArticleDetail.vue';
import {eventBus} from './main.js';
export default {
name: 'app',
data(){
return {
theNews: [],
selectedArticle: null,
changeApi: null
}
},
mounted(){
// I want to have a choice of news articles so I shouldnt mount this to start?
fetch(changeApi)
// fetch("https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=KEY")
.then(res => res.json())
.then(results => this.theNews = results.articles)
eventBus.$on('article-selected', (article) => {
this.selectedArticle = article;
})
},
components: {
"article-list": ArticleList,
"article-detail": ArticleDetail
},
methods:{
handleSelect(){
if ("bitcoin") {
this.changeApi = 'https://newsapi.org/v2/everything?q=bitcoin&from=2019-01-23&sortBy=publishedAt&apiKey=KEY'
} else {
this.changeApi = 'https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=KEY'
}
}
}
}
</script>
<style lang="css" scoped>
.main-container {
display: flex;
justify-content: space-between;
}
h1 {
text-align: center;
font-size: 60px;
}
</style>
Edit - removed keys TA /u/ziptofaf
No comments:
Post a Comment