Vue中取消勾选Checkbox后表格未刷新的问题求助

你遇到的问题核心是：第一次过滤后覆盖了原始的currencies数组，导致后续过滤没有完整数据可用。

当你第一次勾选复选框时，watch触发filterCurrencies，把过滤后的子集赋值给currencies.value。此时原始的全量数据已经丢失，后续取消勾选或切换选项时，filterCurrencies只能基于已经过滤过的子集再过滤，自然无法得到正确的全量或新的过滤结果。

解决方案 #

1. 新增一个originalCurrencies ref来保存原始的全量货币数据
2. 用计算属性替代手动watch，自动根据selectedOptions生成过滤后的结果，更符合Vue响应式逻辑
3. 表格循环渲染计算属性返回的过滤结果，不再直接修改原始数据

修改后的完整代码 #

Script部分

import { ref, onMounted, computed } from 'vue';
import currencyHelpers from '../lib/currencyHelpers';

const info = ref({});
const originalCurrencies = ref([]); // 保存原始全量数据
const headers = [
  { title: 'Name' },
  { title: 'ID' },
  { title: 'ID rego fee' },
  { title: 'ID import fee' },
  { title: 'Converter Name' },
  { title: 'Proof Protocol' },
  { title: 'Options' }
];
const options = [
  { value: 1, label: 'OPTION_FRACTIONAL' },
  { value: 2, label: 'OPTION_ID_ISSUANCE' },
  { value: 4, label: 'OPTION_ID_STAKING' },
  { value: 8, label: 'OPTION_ID_REFERRALS' },
  { value: 16, label: 'OPTION_ID_REFERRALREQUIRED' },
  { value: 32, label: 'OPTION_TOKEN' },
  { value: 128, label: 'OPTION_GATEWAY' },
  { value: 256, label: 'OPTION_PBAAS' },
  { value: 512, label: 'OPTION_PBAAS_CONVERTER' }
];
const selectedCurrency = ref(null);
const currencyDetails = ref('');
const selectedOptions = ref([]); // 存储选中的选项

const handleCurrencyClick = (currency) => {
  console.log(currency.currencydefinition.currencyid)
  const fullyQualifiedName = currency.currencydefinition.fullyqualifiedname;
  console.log("Clicked currency:", fullyQualifiedName);
  selectedCurrency.value = currency;
};

// 计算属性：自动根据选中选项过滤原始数据
const filteredCurrencies = computed(() => {
  if (selectedOptions.value.length === 0) {
    return originalCurrencies.value; // 无选中时返回全量数据
  }

  return originalCurrencies.value.filter(currency => {
    return selectedOptions.value.every(option => {
      // 按位与判断是否包含该选项
      return (currency.currencydefinition.options & option) !== 0;
    });
  });
});

onMounted(async () => {
  info.value = await currencyHelpers.getInfo();
  originalCurrencies.value = await currencyHelpers.listCurrencies(); // 保存原始数据
});

Template部分

<template>
  <div class="overflow-x-auto columns-1">
    <div class="collapse collapse-arrow bg-base-200">
      <input type="checkbox" /> 
      <div class="collapse-title text-xl font-medium">
         Filter Currencies
      </div>
      <div class="collapse-content"> 
        <div class="form-control border mt-1 pt-1">
          <label v-for="(option, index) in options" :key="index">
            <input type="checkbox" :value="option.value" class="checkbox checkbox-primary" v-model="selectedOptions"> 
            <span class="label-text">{{ option.label }}</span>
          </label>
        </div>
      </div>
    </div>
    <div>
      <table class="table">
        <thead>
          <tr>
            <th v-for="header in headers" :key="header.title">{{ header.title }}</th>
          </tr>
        </thead>
        <tbody>
          <!-- 循环渲染过滤后的结果 -->
          <tr class="hover" v-for="currency in filteredCurrencies" :key="currency.currencydefinition.currencyid">
            <td @click="handleCurrencyClick(currency)">{{ currency.currencydefinition.fullyqualifiedname }}</td>
            <td>{{ currency.currencydefinition.currencyid }}</td>
            <td>{{ currency.currencydefinition.idregistrationfees }}</td>
            <td>{{ currency.currencydefinition.idimportfees }}</td>
            <td>{{ currency.currencydefinition.gatewayconvertername }}</td>
            <td>{{ currency.currencydefinition.proofprotocol }}</td>
            <td>{{ currency.currencydefinition.options }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-if="selectedCurrency">
      <h2>Selected Currency Details</h2>
      <textarea rows="5" cols="50">{{ selectedCurrency }}</textarea>
    </div>
  </div>
</template>

关键改动说明 #

• 用originalCurrencies存储原始全量数据，永远不修改它
• 替换watch为computed属性，Vue会自动监听selectedOptions的变化，实时计算过滤结果
• 表格直接绑定filteredCurrencies，响应式更新更高效

内容的提问来源于stack exchange，提问作者artistAhmed