Skip to content

Instantly share code, notes, and snippets.

@yusukebe

yusukebe/app.js

Last active January 20, 2020 07:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yusukebe/655efb65d4e08e0b2a80f4823e05d37f to your computer and use it in GitHub Desktop.
Save yusukebe/655efb65d4e08e0b2a80f4823e05d37f to your computer and use it in GitHub Desktop.
Download ZIP
Vue.jsでメロディー・雛・マークスを出す
Raw
app.js
new Vue({
el: '#app',
data: {
keyword: null,
stars: null,
loading: false,
errored: false
},
methods: {
click: function() {
this.getStars()
},
getStars: function() {
this.loading = true;
axios
.get('https://api.dmm.com/affiliate/v3/ActressSearch', {
params: {
api_id: api_id,
affiliate_id: affiliate_id,
hits: 50,
keyword: this.keyword
}
})
.then(response => {
this.stars = response.data.result.actress
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
}
});
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container mb-4">
<nav class="navbar navbar-expand-lg bg-light mb-4">
<h1 class="navbar-brand pl-3">DMM 女優検索</h1>
</nav>
<div id="app">
<div class="d-flex justify-content-center mb-4">
<form class="form-inline" v-on:submit.prevent="click">
<div class="mb-2 mr-2 form-group">
<input
type="text"
class="form-control"
v-model="keyword"
placeholder="キーワードを入れてね">
</div>
<button class="btn btn-primary mb-2">Search</button>
</form>
</div>
<hr />
<section v-if="errored">
<p>女優さんを取得できませんでした</p>
</section>
<section v-else>
<div v-if="loading" class="text-center" style="margin-top:4rem;">
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div v-else>
<div class="row">
<div v-for="star in stars"
class="col-sm-2">
<div class="card mb-4 text-center">
<img v-bind:src="star.imageURL ? star.imageURL.large : 'dummy.gif'"
class="card-img-top" />
<div class="card-body">
<div class="card-title">{{ star.name }}</div>
<div class="card-sub-title text-muted">{{ star.ruby }}</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.1/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment