Vue渲染报错：Property 'campaign'未定义，筛选Campaigns遇阻求助

核心原因分析 #

这个错误的本质是模板中引用了未在当前作用域定义的campaign变量，大概率是遍历逻辑的变量名笔误、作用域误用，或是响应式数据处理不当导致的。

具体排查与修复步骤 #

1. 检查模板变量作用域与笔误 #

先看你的模板代码，常见错误场景：

• 遍历外层错误引用campaign：

  <!-- 错误：v-if在遍历外层，此时campaign未定义 -->
  <div v-if="campaign.company_id === selectedCompanyId">
    <div v-for="campaign in campaigns" :key="campaign.id">...</div>
  </div>
  

  修复：将v-if移到遍历项内部，或提前用计算属性筛选。

• 遍历变量名与v-if引用不一致：

  <!-- 错误：遍历用`camp`，v-if却写`campaign` -->
  <div v-for="camp in campaigns" :key="camp.id">
    <div v-if="campaign.company_id === selectedCompanyId">...</div>
  </div>
  

  修复：统一变量名，比如都用campaign：

  <div v-for="campaign in filteredCampaigns" :key="campaign.id">
    <div v-if="campaign.company_id === selectedCompanyId && campaign.product_id === selectedProductId">...</div>
  </div>
  

2. 用计算属性统一处理筛选逻辑 #

直接在模板中写复杂筛选容易出作用域问题，建议用计算属性封装：

<script setup>
import { ref, computed } from 'vue'
import { useStore } from 'pinia'
import { storeToRefs } from 'pinia'

const store = useStore()
// 用storeToRefs保持store数据的响应式
const { campaigns } = storeToRefs(store)
const selectedCompanyId = ref('')
const selectedProductId = ref('')

// 封装筛选逻辑
const filteredCampaigns = computed(() => {
  return campaigns.value.filter(item => {
    return item.company_id === selectedCompanyId.value && item.product_id === selectedProductId.value
  })
})
</script>

模板中直接遍历filteredCampaigns即可，无需再写v-if筛选。

3. 确保Pinia Store数据的响应式与初始化 #

检查你的Pinia Store代码：

• 必须将campaigns初始化为空数组，避免渲染时数据为undefined：

  // store示例
  export const useCampaignStore = defineStore('campaign', {
    state: () => ({
      campaigns: [] // 初始化为空数组，关键！
    }),
    actions: {
      async fetchCampaigns() {
        // 异步获取数据后赋值
        const res = await fetch('/api/campaigns')
        this.campaigns = await res.json()
      }
    }
  })
  

• 组件中获取store数据时，必须用storeToRefs解构，否则会丢失响应式：

  // 错误：直接解构会丢失响应式
  const { campaigns } = store 
  // 正确：用storeToRefs保持响应式
  const { campaigns } = storeToRefs(store)
  

4. 验证数据加载时机 #

如果campaigns是异步获取的，确保组件渲染前数据已加载，或添加loading状态避免空值报错：

<script setup>
import { onMounted } from 'vue'
import { useCampaignStore } from '@/stores/campaign'

const campaignStore = useCampaignStore()
const { campaigns } = storeToRefs(campaignStore)
const isLoading = ref(true)

onMounted(async () => {
  await campaignStore.fetchCampaigns()
  isLoading.value = false
})
</script>

<template>
  <div v-if="isLoading">加载中...</div>
  <div v-else v-for="campaign in filteredCampaigns" :key="campaign.id">...</div>
</template>

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