Vue.js嵌套v-for中独立迭代过滤失效问题求助（Laravel Blade）

核心问题在于你试图通过动态生成变量名实现每个campaign的独立过滤，但这种方式既和Blade的语法冲突，也不符合Vue的响应式数据管理逻辑，再加上Vue 2.x及以上已经废弃了filterBy内置过滤器，咱们一步步来修正：

第一步：重构Vue的响应式数据 #

别再尝试创建tags_filter_0、tags_filter_1这类动态变量了，改用数组存储每个campaign对应的过滤标签。在Vue实例的data里定义：

data() {
  return {
    campaigns: [], // 你的campaign数据集
    tags: [], // 标签数据集
    websites: [], // 网站数据集
    tags_filter: [] // 用数组存储每个campaign的过滤值，索引对应campaign的循环下标
  }
}

第二步：修正模板语法与过滤逻辑 #

如果你仍在使用Vue 1.x（兼容旧写法） #

把动态变量名改成数组索引，同时处理Blade的语法转义：

<div class="col s4" v-for="(campaign, ind) in campaigns"> 
  <!-- v-model绑定到数组对应下标的过滤值 -->
  <select class="select-class" v-model="tags_filter[ind]" multiple style="height: 150px;"> 
    <option value="">all</option> 
    <option v-for="tag in tags" value="@{{tag.title}}">@{{tag.title}}</option> 
  </select> 
  <!-- 过滤器使用当前循环下标对应的过滤值 -->
  <select v-model="campaign.selectedWebsites" multiple class="mdc-select__surface select-class" style="height: 300px;" id="web_select_@{{ind}}"> 
    <option v-for="(website, index) in websites | filterBy tags_filter[ind]" id="website_@{{ind}}_@{{website.id}}" value="@{{website.id}}">@{{website.url}}</option> 
  </select> 
</div>

如果你使用Vue 2.x及以上（推荐写法，内置过滤器已废弃） #

Vue 2+移除了filterBy这类内置过滤器，需要用方法或计算属性处理过滤逻辑，这里推荐用方法实现：

首先在Vue实例中添加过滤方法：

methods: {
  getFilteredWebsites(campaignIndex) {
    const filterTags = this.tags_filter[campaignIndex] || [];
    // 选择"all"或未选标签时，返回全部网站
    if (!filterTags.length || filterTags.includes('')) {
      return this.websites;
    }
    // 根据选中标签过滤网站（这里假设website有tags属性，需根据你的实际数据结构调整）
    return this.websites.filter(website => {
      return filterTags.some(tag => website.tags.includes(tag));
    });
  }
}

然后修改模板：

<div class="col s4" v-for="(campaign, ind) in campaigns"> 
  <select class="select-class" v-model="tags_filter[ind]" multiple style="height: 150px;"> 
    <option value="">all</option> 
    <option v-for="tag in tags" value="@{{tag.title}}">@{{tag.title}}</option> 
  </select> 
  <!-- 调用方法获取当前campaign对应的过滤后网站列表 -->
  <select v-model="campaign.selectedWebsites" multiple class="mdc-select__surface select-class" style="height: 300px;" id="web_select_@{{ind}}"> 
    <option v-for="(website, index) in getFilteredWebsites(ind)" id="website_@{{ind}}_@{{website.id}}" value="@{{website.id}}">@{{website.url}}</option> 
  </select> 
</div>

关键说明 #

1. 原代码失效原因：动态生成的变量名无法被Vue响应式系统正确追踪，且Blade会提前解析@符号，导致Vue无法识别变量。用数组索引绑定是Vue管理多独立状态的标准方式。
2. Blade语法注意：@{{ }}是Blade中输出Vue插值的正确方式，避免Blade把Vue的{{ }}解析为自身模板变量。
3. 版本兼容性：Vue 2+必须放弃filterBy旧语法，改用方法或计算属性，代码更可控且符合最佳实践。

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