Question

这是我第一次使用Vuejs。我正在构建一个Web应用程序，我从flickr API加载存储在数组中的图像。我想做一个基本的搜索栏，根据输入的单词过滤图像，但我不知道该怎么做。

我的模板

<input type="text" v-model="search" placeholder="search for image" />
...
<li class="media" v-for="flickrImage in flickrImage">

我搜索的功能是：

export default {
name: 'Flickrlist',
data() {
  return {
    flickrImage: [],
    search: ''
  }
},

computed: {
  filteredImage: function () {
    return this.flickrImage.filter((flickrImage) => {
      return this.flickrImage.title.match(this.search)
    });
  }
}

如何通过filteredImage？

Answer 1

您没有在过滤器功能中引用正确的变量。

filteredImage: function () {
   return this.flickrImage.filter((x) => {
      return x.title.match(this.search)
   });
}

应该是

<li class="media" v-for="flickrImage in filteredImage">

然后您只需要将模板更新为

<meta http-equiv="x-ua-compatible" content="ie=edge">

这是一个基于你的工作JSFiddle：https://jsfiddle.net/qt8m2rwr/1/

搜索数组API JSON Vue

1 个答案: