在 Vue 中使用标签搜索 Flickr API
Searching through Flickr API using tags in Vue
我有一个简单的 Flickr 照片提要,我正在尝试向其添加搜索栏,以便当用户键入搜索词时,应用程序 returns 任何带有包含该搜索词的标签的照片搜索字词。
应用程序加载正常,没有控制台错误,但只要我在搜索栏中输入任何内容,所有照片就会消失,没有返回新照片,但我没有收到任何控制台错误,所以我不是确定我哪里错了。
我的代码:
<template>
<b-container>
<b-row>
<b-col md="12">
<b-input-group v-model="search" size="lg" prepend="Search" class="flickr-search">
<b-form-input></b-form-input>
</b-input-group>
</b-col>
</b-row>
<b-row>
<b-card-group columns>
<b-col v-for="photo in filteredPhotos" class="item" md="12">
<b-card :title="photo.title"
:img-src="photo.media.m"
img-alt="Image"
img-top
img-fluid
tag="article"
style="max-width: 20rem;"
class="mb-2">
<span class="item-date">31 May 2017</span>
<hr/>
<p>By <a :href="'https://www.flickr.com/photos/' + photo.author_id" :title="formatAuthor(photo.author)" target="_blank">{{ formatAuthor(photo.author) }}</a></p>
<ul class="tags">
<li v-for="tag in splitTags(photo.tags)" class="item-tag">
<a :href="'https://www.flickr.com/photos/tags/' + tag" target="_blank" class="item-taglink">{{ tag }}</a>
</li>
</ul>
</b-card>
</b-col>
</b-card-group>
</b-row>
</b-container>
</template>
<script>
import jsonp from "jsonp";
export default {
name: 'PhotoFeed',
data: function () {
return {
Photos: [],
apiURL: "https://api.flickr.com/services/feeds/photos_public.gne?format=json",
search: ''
}
},
mounted(){
this.getFlickrFeed();
},
methods: {
getFlickrFeed(){
let jsonp = require('jsonp');
var self = this;
jsonp(this.apiURL, {name: 'jsonFlickrFeed'}, (err, data) => {
if (err) {
console.log(err.message);
}
else {
self.Photos = data.items;
}
})
},
formatAuthor(authorString){
if (authorString) return authorString.split("\"")[1];
return "Author";
},
splitTags(tagsString) {
if (tagsString) return tagsString.split(" ");
}
},
computed: {
filteredPhotos(){
return this.Photos.filter(photo => {
return photo.tags.includes(this.search);
})
}
}
}
</script>
你的核心问题是 v-model="search"
附加到 <b-input-group>
而不是包含搜索字符串的 <b-form-input>
,所以 this.search
不是你的字符串'重新希望。将搜索输入更改为:
<b-input-group size="lg" prepend="Search" class="flickr-search">
<b-form-input v-model="search"></b-form-input>
</b-input-group>
我有一个简单的 Flickr 照片提要,我正在尝试向其添加搜索栏,以便当用户键入搜索词时,应用程序 returns 任何带有包含该搜索词的标签的照片搜索字词。
应用程序加载正常,没有控制台错误,但只要我在搜索栏中输入任何内容,所有照片就会消失,没有返回新照片,但我没有收到任何控制台错误,所以我不是确定我哪里错了。
我的代码:
<template>
<b-container>
<b-row>
<b-col md="12">
<b-input-group v-model="search" size="lg" prepend="Search" class="flickr-search">
<b-form-input></b-form-input>
</b-input-group>
</b-col>
</b-row>
<b-row>
<b-card-group columns>
<b-col v-for="photo in filteredPhotos" class="item" md="12">
<b-card :title="photo.title"
:img-src="photo.media.m"
img-alt="Image"
img-top
img-fluid
tag="article"
style="max-width: 20rem;"
class="mb-2">
<span class="item-date">31 May 2017</span>
<hr/>
<p>By <a :href="'https://www.flickr.com/photos/' + photo.author_id" :title="formatAuthor(photo.author)" target="_blank">{{ formatAuthor(photo.author) }}</a></p>
<ul class="tags">
<li v-for="tag in splitTags(photo.tags)" class="item-tag">
<a :href="'https://www.flickr.com/photos/tags/' + tag" target="_blank" class="item-taglink">{{ tag }}</a>
</li>
</ul>
</b-card>
</b-col>
</b-card-group>
</b-row>
</b-container>
</template>
<script>
import jsonp from "jsonp";
export default {
name: 'PhotoFeed',
data: function () {
return {
Photos: [],
apiURL: "https://api.flickr.com/services/feeds/photos_public.gne?format=json",
search: ''
}
},
mounted(){
this.getFlickrFeed();
},
methods: {
getFlickrFeed(){
let jsonp = require('jsonp');
var self = this;
jsonp(this.apiURL, {name: 'jsonFlickrFeed'}, (err, data) => {
if (err) {
console.log(err.message);
}
else {
self.Photos = data.items;
}
})
},
formatAuthor(authorString){
if (authorString) return authorString.split("\"")[1];
return "Author";
},
splitTags(tagsString) {
if (tagsString) return tagsString.split(" ");
}
},
computed: {
filteredPhotos(){
return this.Photos.filter(photo => {
return photo.tags.includes(this.search);
})
}
}
}
</script>
你的核心问题是 v-model="search"
附加到 <b-input-group>
而不是包含搜索字符串的 <b-form-input>
,所以 this.search
不是你的字符串'重新希望。将搜索输入更改为:
<b-input-group size="lg" prepend="Search" class="flickr-search">
<b-form-input v-model="search"></b-form-input>
</b-input-group>