在未获取完数据时loading，如何让网页不加载部分数据显示

Question

问题遇到的现象和发生背景

当前在异步获取数据，且网页处于加载中的状态，部分数据因为数值为空报错（清楚报错原因，但不知道怎么改）

用代码块功能插入代码，请勿粘贴截图

虽然我设置showCodeModal为false
但依旧渲染了MODAL里面的弹窗内容，避免该出错

<Modal v-model="showCodeModal" width="50"  fullscreen>
    <div slot="header" class="main-barcode-query-modal-title">
      <div class="iconfont icon-tiaoma2">
        <span> {{A[B].C}}</span>（报错行）
      </div>
    </div>
</Modal>

初始值如下：

showCodeModal: false,
B: -1,
A: []

运行结果及报错内容

TypeError: Cannot read properties of undefined (reading '-1')（报错B=-1无法读取）

我的解答思路和尝试过的方法

<Modal v-model="showCodeModal" width="50"  fullscreen style=“diaplay: none”>

依旧报错

我想要达到的结果

虽然我设置showCodeModal为false
但依旧渲染了MODAL里面的弹窗内容，避免该出错

Answer 1

虽然不展示，但是里面的代码仍然会执行。
{{A[B].C}}，这里判断一下 A[B] 是否存在。
改为：
{{A[B] && A[B].C}}