How to bring the relationships of a certain model to display them in a table with Inertia::render?

Question

I'm trying to get the relationships for a model from the controller so be able to display the relationship not as a id but as that id's name or type or whatever it might be. In this case I'm trying to get information relating to a question, what response type it has (text, multiple, rank, yes or no) and also which section is belongs to (the name)

This is my controller code so far

public function index()
{
    return Inertia::render('Question/Index', [
        'survey_question' => SurveyQuestion::all(),
        'survey_section' => SurveySection::all(),
        'response_type' => ResponseType::all()
    ]);
}

The table in the vue

<el-table
    :data="tableData">
    <el-table-column
        prop="question"
        label="Pregunta">
    </el-table-column>
    
    <el-table-column
        label="Seccion">
        <template slot-scope="scope">
            <p> {{ scope.row.survey_section.title }} </p>
        </template>
    </el-table-column>
    
    <el-table-column
        label="Tipo de Respuesta">
        <template slot-scope="scope">
            <p> {{ scope.row.response_type.type }} </p>
        </template>
    </el-table-column>
    
    <el-table-column
        prop="optional"
        label="Opcional">
    </el-table-column>

    <el-table-column>
        <template slot-scope="scope">
                <div class="btn-link-edit action-button" @click="edit(scope.row)">
                    <i class="fas fa-pencil-alt"></i>
                </div>
                <div class="btn-link-delete action-button" @click="delete(scope.row)">
                    <i class="fas fa-trash"></i>
                </div>
        </template>
    </el-table-column>
</el-table>

This brings the relationships I think, because when I create a new question I have a select option and it does show the names instead of the ids, but when I'm trying to display said name in a table I can only access the id.

I also would like to know how to show for the optional field instead of 0 or 1, yes or no. This field is a boolean in the table structure if that is important.

If I do {{ scope.row }} then I get the information but only of the question like this

{ "id": 1, "question": "asdfasdf", "survey_section_id": 1, "response_type_id": 1, "optional": 1 }

What I would like is that when I do {{ scope.row }} I also get from those ids another array with the information related to that id both from the section and the response type.

It is not apparent as how you're transforming the data, and thus very hard to help you with this. What is the scope variable in this case? Are you iterating over the survey_question prop in your example? Please include the complete files of the files that are relevant. — Linus Juhlin
– Linus Juhlin, Commented Nov 19, 2019 at 14:40

Josias Velazquez · Accepted Answer · 2021-09-09 03:59:58Z

0

You should use with method in the eloquent model. For example:

$result = Model::with(['nameOfTheRelationShip'])->get();

answered Sep 9, 2021 at 3:59

Josias Velazquez

1

Sign up to request clarification or add additional context in comments.

Comments

GhostKiller · Accepted Answer · 2022-12-14 15:27:03Z

As Josias says, you should use with method.

The best practice in laravel is to return the eloquent data then call it in defineProps to use with vue/inertia

Lets say you have a model for devices that belongs to clients, and you want to index all the devices with the client.name. In your devices controller you would return all the devices with the client relationship as follows

public function index()
{
    $devices = Device::with(['client'])->get();
    return Inertia::render('Devices/Index', compact(['devices']));
}

Then in the vue Devices/Index you just have to declare the devices in the definedProps like

defineProps(['devices']);

then you can make a simple v-for statement

<script setup>
    import { Head } from '@inertiajs/inertia-vue3';
    import { Inertia } from "@inertiajs/inertia";
     
    defineProps(['devices']);
</script>
 
<template>
    <div>
        <table>
            <thead>
                <th>
                    Client
                </th>
                <th>
                    Name
                </th>
                <th>
                    Model
                </th>
                <th>
                    Year
                </th>
            </thead>
            <tbody>
                <tr v-for="device in devices" :key="index">
                    <td>
                        {{ device.client.name }}
                    </td>
                    <td>
                        {{ device.name }}
                    </td>
                    <td>
                        {{ device.model }}
                    </td>
                    <td>
                        {{ device.year }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

Collectives™ on Stack Overflow

How to bring the relationships of a certain model to display them in a table with Inertia::render?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related