Vue&Axios Practice
Vue&Axios Practice
Vue Practice
Axios
1. HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<title>The NYT API Demo</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="app" class="container">
<h3 class="text-center" >Vue News</h3>
<div class="row">
<div class="col-md-6">
<select id="" name="" v-model="section">
<option v-for="section in sections " :value="section" v-text="section"></option>
</select>
</div>
<div class="col-md-6">
<a class="btn btn-primary" @click="getPosts(section)">Chocie Category</a>
</div>
</div>
<news-list :results="results"></news-list>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script src="../bower_vendor/jquery/jquery.min.js"></script>
<script src="../bower_vendor/axios/dist/axios.min.js"></script>
<script src="./js/vue_fetchapi.js"></script>
</body>
</html>
2. Vue Code
var NYTBaseUrl = "https://api.nytimes.com/svc/topstories/v2/";
var ApiKey = "05e9bb2d25d64ff89d0a5680357852d5";
function buildUrl(url) {
return NYTBaseUrl + url + ".json?api-key=" + ApiKey;
}
const SECTIONS = "home, arts, automobiles, books, business, fashion, food, health, insider, magazine, movies, national, nyregion, obituaries, opinion, politics, realestate, science, sports, sundayreview, technology, theater, tmagazine, travel, upshot, world"; // From NYTimes
var vm = new Vue({
el: "#app",
data: {
results: [
//{title: "the very first post", abstract: "lorem ipsum some test dimpsum"},
//{title: "then there was the second", abstract: "lorem ipsum some test dimsum"},
//{title: "third time's a charm", abstract: "lorem ipsum some test dimsum"},
//{title: "four the last time", abstract: "lorem ipsum some test dimsum"}
],
sections: SECTIONS.split(", "),
section: "home",
},
mounted() {
this.getPosts(this.section);
},
methods: {
getPosts(section) {
var url = buildUrl(section);
axios.get(url)
.then((response) => {
//console.log(response);
//console.log(response.status);
this.results = response.data.results;
})
.catch(error => { console.log(error); });
}
},
components: {
"news-list": {
template: `
<section>
<div class="row" v-for="posts in processedPosts">
<div class="col-md-3" v-for="post in posts">
<div class="thumbnail">
<div class="caption">
<h4 v-text="post.title"></h4>
</div>
<a :href="post.url" target="_blank"><img :src="post.image_url" class="img-responsive"></a>
<div class="caption" >
<p v-text="post.abstract"></p>
</div>
</div>
</div>
</div>
</section>
`,
props: ["results"],
computed: {
processedPosts() {
let posts = this.results;
// Add image_url attribute
posts.map(post => {
let imgObj = post.multimedia.find(media => media.format === "superJumbo");
post.image_url = imgObj ? imgObj.url : "http://placehold.it/300x200?text=N/A";
});
// Put Array into Chunks
let i, j, chunkedArray = [], chunk = 4;
for (i=0, j=0; i < posts.length; i += chunk, j++) {
chunkedArray[j] = posts.slice(i,i+chunk);
}
//console.log(chunkedArray);
return chunkedArray;
}
},
}
}
});