Laravel+Vue场景下如何展示嵌套数组中的total_billed_by_year数据

现存问题 #

• 索引混用错误：getInfo 方法中直接使用外层列表的 index 访问 total_billed_by_year 嵌套数组的元素，当嵌套数组长度小于外层索引值时会读取到undefined
• 属性名拼写错误：代码中同时出现正确属性名total_billed_by_year和错误拼写的total_billed_year，直接导致字段读取失败
• 弹窗数据结构不匹配：现有弹窗逻辑仅支持展示单条年账单，未适配total_billed_by_year是数组的结构
• 列表渲染逻辑错误：列表中直接用外层循环的index访问嵌套数组元素，和数据结构完全不匹配

修正方案（点击列表项展示对应条目下所有年账单） #

JS逻辑代码修正 #

getInfo(index){
  this.popup = true;
  const currentItem = this.pageData.ppr_data[index]
  this.inquiryForm.total_contractual = currentItem.total_contractual
  // 直接存储完整的年账单数组，供弹窗循环渲染
  this.inquiryForm.billList = currentItem.total_billed_by_year || []
}

弹窗组件模板代码修正 #

<vs-popup :active.sync="popup">
    <div class="vx-row mb-base">
          <div class="vx-col lg:w-1/2 w-full mb-base">
           <vx-card
              title="Total Bill"
              icon="/images/task.png"
              headerClass="bg-dark pb-6"
              titleColor="#fff"
              subtitleColor="#fff"
            >
              <template slot="no-body">
                <div
                  id=""
                  class="transition-all duration-500 ease-in-out p-4"
                >
                      <div class="grid lg:grid-cols-3 grid-cols-1"> 
                   <div class="mt-5 ml-2">
              <h5>Total Contractual Amount</h5>
              <div class="text-lg">
              <div v-if="inquiryForm.total_contractual">
                <div>RM {{inquiryForm.total_contractual}} </div>
              </div><div v-else>-</div></div>
            </div>
            <!-- 循环渲染所有年份的账单数据 -->
              <div class="mt-5 ml-2" v-for="(bill, ind) in inquiryForm.billList" :key="ind">
              <h5>Bill {{bill.bil_year}} </h5>
              <div class="text-lg">
                <div>RM {{bill.bil_total_amount}}
              </div>
              </div>
            </div>
            </div>
              </template>
            </vx-card>
          </div>
          </div>
      </vs-popup>

列表渲染模板代码修正 #

<vs-list-item
class="hover:shadow"
v-for="(tr, index) in ppr"
:key="index" 
>
 <template slot="subtitle">
  <div @click="getInfo(index)" class="cursor-pointer">{{tr.id}}</div>
 </template>
 <span class="font-bold truncate overflow-auto">{{tr.month}} -{{tr.year}} 
<p v-for="(bill,ind) in tr.total_billed_by_year" :key="ind">
 {{bill.bil_year}}：{{bill.bil_total_amount}}
  </p>
</span>
</vs-list-item>

可选方案（点击具体某条年账单展示对应单条数据） #

如果需要点击单条年账单才弹出对应数据，只需调整两处代码：

1. 列表绑定点击事件到单条年账单，传入双层索引

<p v-for="(bill,ind) in tr.total_billed_by_year" :key="ind" @click="getInfo(index, ind)">
  {{bill.bil_year}}：{{bill.bil_total_amount}}
</p>

2. 调整JS逻辑，读取指定嵌套数组元素

getInfo(itemIndex, billIndex){
  this.popup = true;
  const currentItem = this.pageData.ppr_data[itemIndex]
  this.inquiryForm.total_contractual = currentItem.total_contractual
  const currentBill = currentItem.total_billed_by_year[billIndex]
  this.inquiryForm.bil_year = currentBill.bil_year
  this.inquiryForm.bil_total_amount = currentBill.bil_total_amount
}

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