Vue，带过滤器的 Axios

Question

我真的在为 API 列表项目苦苦挣扎。我必须显示 API 调用的结果，然后让用户搜索特定值。列出的结果已经在 v-for 中，所以我不能再次过滤它。不幸的是，除了通过单击搜索按钮再发送一个 axios 调用并过滤响应之外，别无他法。而且 API 超级复杂，不可能只附加 +this.searchedValue 因为它找不到它，它是一个嵌套数组。有可能吗？另外，我很乐意听到任何其他解决方案。感谢阅读。

以下代码已经显示了列表，但我希望通过搜索栏获得一个关于搜索值的新列表。

      <li @click="select(content.id)" 
      v-for="(content,id) in contents" 
      :key="id"
      >
        <h4> {{ content.department.label }} </h4>
        <p> {{ content.location.city }} </p>
      </li>
    </ul>


   mounted() {
      axios.get('https://api/')
                        .then(response => {
                            this.contents = response.data.content;
                        })
    }


**I have already tried to loop in the filter, like this way but then the list doesn't appear:**
 computed: {
  Filter: function(){
            return this.contents.filter((content) => {
               return content.match(this.filter);
            });
     }
     }

Answer 1

我会在计算属性中放置过滤器

<input type="text" placeholder="Search" v-model="search" />
<li v-for="(item, index) in filteredList">
 {{item}}
</li>


data() {
    return {
        search: ''
    }
},
computed() {
    filteredList() {
        let self = this
        this.contents.filter(item => {
            return item.department.label.toLowerCase().indexOf(self.search.toLowerCase()) >= 0)
        })
    }
}