Question

我有一个简单的Flickr照片供稿，正在尝试向其中添加搜索栏，以便在用户键入搜索词时，应用程序返回所有带有包含该搜索词的标签的照片。

该应用程序加载正常，没有控制台错误，但是只要我在搜索栏中输入任何内容，所有照片就会消失，不会返回新照片，但是我没有任何控制台错误，所以我不确定在哪里我错了。

我的代码：

<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>

Answer 1

您的核心问题是db.Tag.findAll({ attributes: [ "id", "TagName", [db.sequelize.fn("COUNT", "stories.id"), "Count_Of_Stories"] ], include: [{ model: db.Story, attributes: [], duplicating: false }], group: ["id"], order: [ [db.sequelize.literal("`Count_Of_Stories`"), "DESC"] ] });附加到v-model="search"而不是包含搜索字符串的<b-input-group>上，因此<b-form-input>不是您希望的字符串对于。将搜索输入更改为：

this.search

https://codesandbox.io/s/18k857337q

使用Vue中的标签搜索Flickr API

1 个答案: