Javascript 清除无法使用Vue的筛选器功能

我正在开发Vue应用程序中的过滤功能。我是Vue的新手，而且我的过滤器还处于半工作状态。它成功地允许我从下拉列表中选择资产类型，并将相应地过滤结果。但是clearFilters方法不起作用

我的目标是将assetType重置为空字符串，将filterResults数组重置为空，我的想法是，由于检查了filterResults的长度，当我清除它时，它将返回显示整个未筛选的数组

我做错了什么？如有任何信息，将不胜感激

{{assetType？assetType:'资产类型'}} {{formatDatetransaction.date}

{{formatStringtransaction.tx_type}事务

{{transaction.coin_type}

{{formatDateitem.date}

{{formatStringitem.tx_type}事务

{{formatDateitem.date}

已创建发票

invoice{{item.invoice\u id}

{{formatDateitem.date}

登录事件

... 为简洁起见，删除了导入 导出默认值{ 名称：'全球'， 组件：{}， 道具：['totalHistory'，'printFormat']， 混音：['formatDate'，'formatMenuLabel']， 资料{ 返回{ showAssetType:false， showClassType:false， activityType:， 资产类型：， 过滤器结果：[]， 打印模式：false } }, 方法：{ setAssetFilter值{ this.showAssetType=false this.assetType=值 }, 格式化字符串str{ 常量firstLetter=str.charAt0 常量余数=str.1 返回firstLetter.toUpperCase+余数 }, updateClassType transactionRecord{ 此.store.dispatch'updateTransactionType'，transactionRecord }, updateTransaction事务记录{ console.log'in updateTransaction'，transactionRecord 此.$store.dispatch'updateTransactionNote'，transactionRecord }, filterByAssetType{ const selectedCurrency=this.assetType 如果this.assetType==='all'{ 这个是透明过滤器 }否则{ this.filterResults=this.totalHistory.filterfunction trans{ 返回trans.currency==所选货币 } } }, 透明过滤器{ 返回this.assetType=&&this.filterResults=[] } } }

---

如果我没有弄错的话，你只想让clearFilters方法工作？如果是，请尝试：

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

逻辑AND运算符&&不用于链接表达式。如果第一个表达式是真实的，那么就做一个表达式

第一个表达式和第二个表达式，示例

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

---

如果您将QuestionResponsed设置为false，它将记录false表达式1

我同意Jens重写clearFilters。我觉得原作很奇怪

我已经开始创建一个示例组件，以演示在没有答案时简化过滤过程的可能性。因为我已经完成了它，它的工作，我张贴它

ClearFilters.vue

<template>
  <div class="clear-filters">
    <div class="row">
      <div class="col-md-6">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>NAME</th>
              <th>CURRENCY</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="asset in filteredAssets" :key="asset.id">
              <td>{{ asset.name }}</td>
              <td>{{ asset.currency }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label class="criteria-label">FILTER CRITERIA:</label>
          <select class="form-control" v-model="currentCriteria">
            <option v-for="(criteria, index) in criteriaOptions" :key="index" :value="criteria">{{ criteria }}</option>
          </select>
        </div>
        <button type="button" class="btn btn-secondary" @click="resetFilter">Reset</button>
      </div>
    </div>
  </div>
</template>

<script>
  import assets from './clear-filters-data.js';

  export default {
    data() {
      return {
        assets: assets,
        criteriaOptions: [
          'ALL', 'USD', 'GBP', 'CAD'
        ],
        currentCriteria: 'ALL'
      }
    },
    computed: {
      filteredAssets() {
        if (this.currentCriteria === 'ALL') {
          return this.assets;
        }
        else {
          return this.assets.filter( asset => asset.currency === this.currentCriteria);
        }
      }
    },
    methods: {
      resetFilter() {
        this.currentCriteria = 'ALL';
      }
    }
  }
</script>

<style scoped>
  .criteria-label {
    font-weight: bold;
  }
</style>

const assets = [
  {
    id: 1,
    name: 'asset1',
    currency: 'USD'
  },
  {
    id: 2,
    name: 'asset2',
    currency: 'USD'
  },
  {
    id: 3,
    name: 'asset3',
    currency: 'USD'
  },
  {
    id: 4,
    name: 'asset4',
    currency: 'GBP'
  },
  {
    id: 5,
    name: 'asset5',
    currency: 'GBP'
  },
  {
    id: 6,
    name: 'asset6',
    currency: 'GBP'
  },
  {
    id: 7,
    name: 'asset7',
    currency: 'CAD'
  },
  {
    id: 8,
    name: 'asset8',
    currency: 'CAD'
  },
  {
    id: 9,
    name: 'asset9',
    currency: 'CAD'
  },
]

export default assets;