Odoo/Owl.js循环渲染子组件时props传递异常，props.element为null

核心问题1：props传递方式错误 #

父组件模板中直接写 <TableElement element="el" /> 是把字符串 "el" 传递给子组件的element props，而非循环变量el本身。子组件接收到字符串后，因props类型定义为Array，类型不匹配导致最终this.props.element为null。

核心问题2：子组件props类型定义错误 #

循环渲染的是数组中的单个对象元素，但子组件将element props定义为Array类型，类型不匹配触发框架类型校验逻辑，导致props值被置为null。

修复步骤 #

1. 修正父组件的props传递方式
   将静态赋值改为动态绑定，根据使用的框架语法调整：

   • 若为Vue框架，使用v-bind语法：

     <t t-foreach="state.elements" t-as='el'>
       <TableElement :element="el" />
     </t>
     

   • 若为Odoo OWL框架，使用QWeb动态属性语法：

     <t t-foreach="state.elements" t-as='el'>
       <TableElement t-att-element="el" />
     </t>
     

2. 修正子组件的props类型定义
   在service_table_element.js中，将element的props类型从Array改为Object（每个循环项是单个对象）：

   // service_table_element.js
   export default {
     props: {
       element: {
         type: Object,
         required: true, // 确保必须传入，避免null
         default: () => ({}) // 可选：设置默认空对象防止报错
       }
     },
     setup(props) {
       console.log(props.element); // 现在可正常拿到目标对象
       // ...其他逻辑
     }
   }
   

3. 可选：添加空值判断避免模板报错
   为应对异步加载等可能出现的临时null情况，可在子组件模板中添加空值判断：

   <!-- 子组件模板示例 -->
   <div v-if="element">{{ element.id }}</div>
   <!-- 或使用可选链语法 -->
   <div>{{ element?.id }}</div>
   

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