Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
[Vue warn]: Error in render: "TypeError: Cannot read property 'url' of undefined"
saya sedang membuat fitur search mengunakan giphy api saya menemukan error seperti ini
vue.js:597 [Vue warn]: Error in render: "TypeError: Cannot read property 'url' of undefined"
(found in <Root>)
ketika di api nya saya kasih limit 25 bisa keluar gif nya tetapi ketika saya kasih limit nya lebih dari 25 itu terdapar error seperti di atas
inih code nya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://bootswatch.com/4/solar/bootstrap.min.css">
<title>Document</title>
</head>
<body style="overflow-x:hidden">
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
</form>
</div>
</nav>
<div class="text-center container mt-5" style="width:100%" >
<input type="text" class="form-control" placeholder="mau nyari gif apa?" v-model="cari" @keyup.enter ='pesan'>
</div>
<br>
<section v-if="errored">
<p>Maaf lagi ada error</p>
</section>
<section v-else>
<div v-if="loading" class="text-center h1">Loading...</div>
<div v-else >
<div class="row justify-content-center" >
<div class="col-md-10" >
<div v-for="data in data" >
<a v-bind:href="data.images.preview_webp.url" target="_blank" > <img style=" float: left; width: 100px; height: 100px; position: blok;" class="" v-bind:src="data.images.preview_webp.url" ></a>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script>
new Vue({
el: '#app',
data () {
return {
data: null,
loading: true,
errored: false,
cari:null
}
},
methods: {
pesan() {
var app = this
// axios.get('https://api.giphy.com/v1/gifs/trending?api_key=yWMNf9zPUng3urXYNHSmHCDrT4CzSlD7&limit=100&rating=G')
axios.get('http://api.giphy.com/v1/gifs/search?q='+app.cari+'&api_key=yWMNf9zPUng3urXYNHSmHCDrT4CzSlD7&limit=100&offset=0&rating=G&lang=en')
.then(response => {
app.data = response.data.data
})
.catch(error => {
console.log(error)
app.errored = true
})
.finally(() => app.loading = false)
}
},
mounted () {
var app = this
axios.get('https://api.giphy.com/v1/gifs/trending?api_key=yWMNf9zPUng3urXYNHSmHCDrT4CzSlD7&limit=200&rating=G')
// axios.get('http://api.giphy.com/v1/gifs/search?q='+app.cari+'&api_key=yWMNf9zPUng3urXYNHSmHCDrT4CzSlD7&limit=5')
.then(response => {
app.data = response.data.data
})
.catch(error => {
console.log(error)
app.errored = true
})
.finally(() => app.loading = false)
},
})
</script>
</html>
1 Jawaban:
Jawaban Terpilih
Untuk limit API dari giphy kamu bisa cek <a href='https://developers.giphy.com/faq/ '>Halaman faq ini</a> disana limitnya 42 search per jam, kalo lebih dari itu mungkin error
Tanggapan
oke makasih mas hilman saya belom baca faq nya :) lain kali saya baca dulu
sama sama, betul kalau pakai API perlu baca aturan dari orang yang bikin :D