Clear Filter Functionality Not Working Vue Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Clear Filter Functionality Not Working Vue without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I’m working on a filtering feature in a Vue application. I’m new to Vue, and I have the filter semi-working. It successfully allows me to select an asset type from the dropdown, and will filter the results accordingly. But what’s not working is the clearFilters method.

My goal is to reset the assetType to an empty string and the filterResults array to empty, and my thought was that since checking the length of filterResults, when I clear it it would return to displaying the entire un-filtered array.

What am I doing wrong? Any information would be greatly appreciated.

<template>
  <div ref="content">
    <div class="container pt-3 text-center">
      <div class="filter-container">
        <div class="btn-group">
          <button
            v-ripple="'rgba(255, 255, 255, .2)'"
            @click="showAssetType = !showAssetType"
            class="btn btn-secondary dropdown-toggle"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
            style="max-height: 40px;">
            {{assetType ? assetType : 'Asset Type'}}
          </button>
          <div class="dropdown-menu" :style="'display:' + (showAssetType ? 'block' : 'none') + ';'">
            <a class="dropdown-item" @click.prevent="setAssetFilter('all')" href="#!">All Assets</a>
            <a class="dropdown-item" @click.prevent="setAssetFilter('USD'); filterByAssetType()" href="#!">USD</a>
            <a class="dropdown-item" @click.prevent="setAssetFilter('GBP'); filterByAssetType()" href="#!">GBP</a>
            <a class="dropdown-item" @click.prevent="setAssetFilter('CAD'); filterByAssetType()" href="#!">CAD</a>
          </div>
        </div>
      </div>
    </div>

  <div id="data-table" v-if="filterResults.length > 0">
    <div v-for="(transaction, index) in filterResults" :key="index">
      <global-history-item>
        <template v-slot:header>
          <h1 class="date">{{formatDate(transaction.date)}}</h1>
            <div class="transaction-header-wrapper">
              <p class="transaction-text">{{formatString(transaction.tx_type)}} Transaction</p>
              <p class="transaction-text" style="text-align: right">{{transaction.coin_type}}</p>
            </div>
        </template>
        <template v-slot:content>
          <global-transaction :transaction='transaction' @updateClassType="updateClassType" />
        </template>
      </global-history-item>
    </div>
  </div>
  <div id="data-table">
    <div v-for="(item, index) in totalHistory" :key="index">
      <div v-if="item.tx_type">
        <global-history-item>
          <template v-slot:header>
            <h1 class="date">{{formatDate(item.date)}}</h1>
              <div class="transaction-header-wrapper">
                <p class="transaction-text">{{formatString(item.tx_type)}} Transaction</p>
              </div>
          </template>
          <template v-slot:content>
            <global-transaction :transaction='item' @updateClassType="updateClassType" />
          </template>
        </global-history-item>
      </div>
      <div v-else-if="item.invoice_id">
        <global-history-item>
          <template v-slot:header>
            <h1 class="date">{{formatDate(item.date)}}</h1>
            <div class="invoice-header-wrapper">
              <p class="invoice-text">Invoice Created</p>
              <p class="invoice-text">Invoice #{{item.invoice_id}}</p>
            </div>
          </template>
          <template v-slot:content>
            <global-invoice :invoice='item' />
          </template>
        </global-history-item>
      </div>
      <div v-else>
        <global-history-item>
          <template v-slot:header>
            <h1 class="date">{{formatDate(item.date)}}</h1>
            <div class="invoice-header-wrapper">
              <p class="invoice-text">Login Event</p>
              <br />
            </div>
          </template>
          <template v-slot:content>
            <global-account-activity :message='"A successful login to your account was made"' />
          </template>
        </global-history-item>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
... imports removed for brevity

export default {
  name: 'Global',
  components: { },
  props: ['totalHistory', 'printFormat'],
  mixins: ['formatDate', 'formatMenuLabel'],
  data () {
    return {
      showAssetType: false,
      showClassType: false,
      activityType: '',
      assetType: '',
      filterResults: [],
      printMode: false
    }
  },
  methods: {
    setAssetFilter (value) {
      this.showAssetType = false
      this.assetType = value
    },
    formatString (str) {
      const firstLetter = str.charAt(0)
      const remainder = str.slice(1)
      return firstLetter.toUpperCase() + remainder
    },
    updateClassType (transactionRecord) {
      this.$store.dispatch('updateTransactionType', transactionRecord)
    },
    updateTransaction (transactionRecord) {
      console.log('in updateTransaction', transactionRecord)
      this.$store.dispatch('updateTransactionNote', transactionRecord)
    },
    filterByAssetType () {
      const selectedCurrency = this.assetType
      if (this.assetType === 'all') {
        this.clearFilters()
      } else {
        this.filterResults = this.totalHistory.filter(function (trans) {
          return trans.currency === selectedCurrency
        })
      }
    },
    clearFilters () {
      return (this.assetType = '') && (this.filterResults = [])
    }
  }
}
</script>

Answer

So if I am not mistaking, you only want the method clearFilters, to work? If so, try:

    clearFilters () {
      this.assetType = ''
      this.filterResults = []
    }

The logical AND operator (&&) is not to chain expressions. It’s to do an expression if the first expression is truthy.

First expression && second expression, example

  const questionAnswered = true
  console.log(questionAnswered && "Hooray!")
  // will log "Hooray!" (Expression 2)

If you set questionAnswered to false, it will log false (expression 1)

We are here to answer your question about Clear Filter Functionality Not Working Vue - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji