How to display relationship data in Laravel Inertia Vue 3?

Question

I'm new to laravel-inertia-vue3. I have following code in controller.

$revenue = QueryBuilder::for(DailyRevenue::class)->with('tax')->paginate(50);
    return Inertia::render('DailyRevenue/Index', ['revenue' => $revenue])->table(function (InertiaTable $table) {
        $table->column('id', 'id', searchable: true, sortable: true);
        $table->column('date', 'date', searchable: true, sortable: true);
        $table->column('tax', "tax");
        $table->column('amount', 'amount',  sortable: true);

Tax and DailyRevenue are two models and DailyRevenue belongs to tax. I have following code in DailyRevenue model.

 public function tax(){
    return $this->belongsTo(Tax::class);
}

In index.vue file I have following code:

 <Table :resource="revenue"/>

There is a column called tax_name in Tax model. I want to display tax_name in the table but unable to add column from controller. Is there any way to do this? Thanks in advance.

Answer 1

It was so simple. I found following solution. It worked perfectly.

<Table :resource="revenue">
         <template #cell(tax_name)="{ item: tax }">
                  {{tax.tax.tax_name}}
         </template>
 </Table>