我有下面的vue组件：
<template>
<div class="container">
<div class="row">
<div class="col-md-4" v-for="product in products" :key="product.id">
<div class="card mb-4">
<!-- <img :src="product.image" class="card-img-top" alt="..."> -->
<div class="card-body">
<h5 class="card-title">{{ product.name }}</h5>
<p class="card-text">{{ product.description }}</p>
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
</div>
<nav>
<ul class="pagination">
<li class="page-item" :class="{ 'disabled': !links.prev }">
<a class="page-link" @click.prevent="getProducts(links.prev)" href="#">Previous</a>
</li>
<li class="page-item">
<span class="page-link">{{ meta.current_page }}/{{ meta.last_page }}</span>
</li>
<li class="page-item" :class="{ 'disabled': !links.next }">
<a class="page-link" @click.prevent="getProducts(links.next)" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</template>
<script>
export default {
data(){
return {
products: [],
meta: {},
links: {}
}
},
methods: {
getProducts(url = '/api/products') {
axios.get(url)
.then(response => {
this.products = response.data.data;
this.meta = response.data.meta;
this.links = response.data.links;
});
},
},
mounted(){
this.getProducts();
},
}
</script>我用Laravel做了一个简单的资源API。当你加载页面时，它会列出数据库中的产品，你也可以给它分页。
我怎么能在里面放一个过滤选项呢？就像一个简单的文本输入，当你在里面写东西的时候，数据就会被过滤掉？
我尝试将变量绑定到输入并将其传递给getProducts方法，但没有成功。
我对vue3非常陌生，对Laravel有点熟悉，所以如果可能的话请原谅我。
2条答案
按热度按时间1tu0hz3e1#
我怎么能在里面放一个过滤选项呢？就像一个简单的文本输入，当你在里面写东西的时候，数据就会被过滤掉？
你需要做的就是：过滤数据，使用Vue.js实现这一点的最佳方法是使用计算属性。
例如，如果你有一堆“产品”数据保存在一个数组中，这些数据有id、name和description属性，你还有一个filterText字段，它保存了你将用于过滤的文本，那么你可以创建一个计算属性，比如调用
filteredProducts，它返回这个由感兴趣的文本过滤的数组。如果需要，你甚至可以让这个相同的计算属性过滤器只包含属性名，或者同时包含属性名和描述，类似这样（使用composition API）：然后，您可以像在程序中使用任何其他属性一样使用此计算属性。
一个完整的例子可能是这样的：
store.js
App.vue
可以在Vue SFC Playground上找到一个可运行的示例
hwamh0ep2#
当然，你可以做的最简单的事情是通过模型值进行过滤（无论输入中的值是什么）。也就是说，你的计算将对你的输入值的每次变化做出React，并返回计算结果。
它的工作方式是，每当它的React依赖项（input）被更改时，computed基本上会重新计算