Clear Filter Functionality Not Working Vue

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)