Vue组件条件创建问题：store.plan非空时渲染Action组件报错action未定义

问题背景 #

需要在store.plan不为空时渲染Action组件列表，使用v-if判断后渲染显示正常，但组件创建阶段抛出错误：Uncaught (in promise) TypeError: action is undefined。

错误截图 #

现有代码 #

<template>
    <div class="planlist" v-if="parse">
        <ul id="planOl">
        <Action
        v-for="action in store.plan"
            :action_id="action.act_id"
            :actor="action.actor"
            :color="action.color"
            :size="action.size"
            :lego_name="action.lego"
            :pick_pos="action.pick"
            :place_pos="action.place"
            :blocked="action.blocked"
            :status="action.status"
            :key="action.act_id"
        />
        </ul>
    </div>
</template>

<script>
import Action from '../components/Action.vue';
import { store } from '../js/store.js'

export default {
    name: 'Plan', 
    data() {
        return {           
            store,
        }
    },
    computed: {
        parse() { 
            if (store.plan.length > 0) { 
                return true;
            }
            return false;
        }
    },
    components: {Action}
}
</script>

问题原因 #

1. store.plan可能在异步加载过程中处于非数组状态（比如初始为null/undefined），此时访问store.plan.length会触发隐性错误，且数据更新的间隙可能触发无效遍历。
2. 即使store.plan是数组，内部可能存在undefined元素，导致v-for遍历到无意义的项，访问action.act_id等属性时直接抛出错误。

解决方法 #

方法1：给遍历数组加兜底+使用可选链 #

修改v-for的遍历源，确保始终遍历合法数组，同时用可选链避免访问undefined对象的属性：

<Action
  v-for="action in (store.plan || [])"
  :action_id="action?.act_id"
  :actor="action?.actor"
  :color="action?.color"
  :size="action?.size"
  :lego_name="action?.lego"
  :pick_pos="action?.pick"
  :place_pos="action?.place"
  :blocked="action?.blocked"
  :status="action?.status"
  :key="action?.act_id"
/>

方法2：优化computed判断逻辑 #

修改parse计算属性，先确认store.plan是数组再判断长度：

computed: {
    parse() { 
        return Array.isArray(store.plan) && store.plan.length > 0;
    }
},

方法3：给Action组件的props设置默认值 #

在Action.vue中给所有props设置默认值，即使传入undefined也不会报错：

// Action.vue的script部分
export default {
  props: {
    action_id: {
      type: [String, Number],
      default: ''
    },
    actor: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#000'
    },
    size: {
      type: String,
      default: ''
    },
    lego_name: {
      type: String,
      default: ''
    },
    pick_pos: {
      type: Array,
      default: () => []
    },
    place_pos: {
      type: Array,
      default: () => []
    },
    blocked: {
      type: Boolean,
      default: false
    },
    status: {
      type: String,
      default: ''
    }
  }
}

方法4：初始化store.plan为空数组 #

在store.js里把plan的初始值设为空数组，从根源避免非数组状态：

// store.js
export const store = {
  // 其他属性
  plan: [] // 初始化为空数组
}

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