vue 对象变量不存在时，赋值为空，怎么写？

Question

hostSelectionTableData[ModelName]["NominalHeatingOperation1_76C_3035C_CapacityMinNomMax"].Unit

现在： hostSelectionTableData: {}
ModelName是动态的型号有多个，ModelName下有很多的key:value，

问题：

<td>{{ hostSelectionTableData[ModelName]["NominalHeatingOperation1_76C_3035C_CapacityMinNomMax"].Unit }}</td>

如果

hostSelectionTableData[ModelName]["NominalHeatingOperation1_76C_3035C_CapacityMinNomMax"]

不存在时会提示：
Error in render: "TypeError: Cannot read properties of undefined (reading 'Unit')"，
这种情况下怎么办？

Answer 1

我这边一般两种方案解决

<td v-if='hostSelectionTableData[ModelName]&&hostSelectionTableData[ModelName]["xxx"]'>{{ hostSelectionTableData[ModelName]["xxx"].Unit }}</td>

或

<td>{{ hostSelectionTableData[ModelName]&&hostSelectionTableData[ModelName]["xxx"]&&hostSelectionTableData[ModelName]["xxx"].Unit }}</td>

如果支持可选链

<td>{{ hostSelectionTableData?.[ModelName]?.["xxx"]?.Unit }}</td>