使用json和Vue js单击按钮时按数据字段过滤数据

Posted 2023-02-16

【中文标题】使用json和Vue js单击按钮时按数据字段过滤数据

【英文标题】：Filter data by data field when button on click using json and Vue js

【发布时间】：2021-01-24 03:15:46

【问题描述】：

如何在 Vue js 上使用 json 文件按下按钮时过滤数据。我想按数据上每个对象内部的类别进行过滤。

portfolio-v1.json

    
  "data":[
    
      "image_path":"static/products/DELUXE-BATHROBE.jpg",
      "title":"Beautiful Designs",
      "heading":"Lorem Ipsum is simply dummy.",
      "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      "vendor":"George Courey",
      "category":"Blanket"
    ,
    
      "image_path":"static/products/HOME-CARE-SLIP-PAD.png",
      "title":"Mutifunctionals Blocks",
      "heading":"Lorem Ipsum is simply dummy.",
      "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      "vendor": "George Courey",
      "category": "Blanket"
    ,
    
      "image_path":"static/products/HERRINGBONE-THERMAL-BLANKET.jpg",
      "title":"Vuejs App For Game",
      "heading":"Lorem Ipsum is simply dummy.",
      "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      "vendor": "George Courey",
      "category": "Blanket"
    
  ]

portfolioGrid.vue

<template>
  <div class="row col-space">
    <!-- START PORTFOLIO FILTER AREA -->
    <div class="col-12">
      <div class="text-center">
        <div class="portfolio-filter mb-40">
          <button class="active" data-filter="*">Show all</button>
          <button data-filter=".cat1">Linens</button>
          <button data-filter=".cat2">Blankets</button>
          <button data-filter=".cat3">Protective Products</button>
          <button data-filter=".cat4">Top Sheets</button>
          <button data-filter=".cat5">Staff Apparel</button>
          <button data-filter=".cat6">Towels</button>
          <button data-filter=".cat7">Bathrobes & Slippers</button>
        </div>
      </div>
    </div>
    <!-- END PORTFOLIO FILTER AREA -->
    <div v-for="(portfolio,index) of portfoliov1.data.slice(0,showNoOfPosts)" :key="index"
         class="col-sm-12 col-md-6 col-lg-4 ">
      <div class="overlay-wrap">
        <img :src="portfolio.image_path"  class="img-fluid border-rad w-100" 
             />
        <a :href="portfolio.image_path" class="card-img-overlay primary-tp-layer pos-center text-center"
           data-fancybox="images">
                    <span class="center-holder">
                        <a class="ih-fade-down square-40 rounded-circle bg-white shadow-md">
                            <i class="fa fa-plus align-middle"></i>
                        </a>
                    </span>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import portfoliov1 from 'Components/data/portfolio-v1.json'

export default 
  props: ['showNoOfPosts'],
  data() 
    return 
      portfoliov1
    
  

</script>
   

我只想显示按钮上选择的类别中的项目。它应该抓取类别并检查它是否是用户选择的类别，然后仅显示包含该类别的项目。如何做到这一点。

【参考方案1】：

我建议在您的数据对象中创建一个filter 变量，如下所示：

  data() 
    return 
      portfoliov1,
      filter: ""
    
  

单击其中一个按钮时，设置此变量的值。

<button class="active" @click="filter = ''">Show all</button>
<button @click="filter = 'Linens'">Linens</button>

并创建一个计算属性来获取过滤后的数据：

computed: 
  portfolio() 
    if (!this.filter) 
      return this.portfoliov1.data;
    
    return this.portfoliov1.data.filter(p => p.category === this.filter);
  

那么你的模板就变成了：

<div v-for="(p, index) of portfolio.slice(0,showNoOfPosts)"

旁注

我还建议在 v-for 循环中创建按钮，如下所示：

<button v-for="category in categories" :key="category" :class=" 'active': filter === category " @click="filter = category" />

data() 
  return 
    // ...
    categories: ["Blanket", /* ... */]
  

请注意，您需要处理“无过滤器”的情况。

【讨论】：

这很好用！但是，您碰巧知道为什么我的图像路径损坏了吗？我相信过滤器会干扰投资组合 image_path。

在您的模板中，它应该与<img :src="p.image_path" 一起使用。确保没有错字。