Как отобразить на элементе таблицы данные из других таблиц и отобразить да или нет в зависимости от идентификатора

Question

Я пытаюсь отобразить в таблице информацию об определенном элементе, в данном случае это вопрос, информацию о том, к какому разделу он принадлежит, тип ответа, и если вопрос не является обязательным.

Сейчас я могу отображать только идентификаторы, такие как section_id, response_type_id и optional. Я хочу отобразить имена первых двух, такие как section: school, response_type: text, а для необязательных это не идентификатор другой таблицы, а логическое значение, я хочу отобразить его как optional: yes.

Если в моей таблице я позвоню scope.row, чтобы посмотреть, что у меня есть, это просто информация о самом вопросе, например

question
section_id
response_type_id
optional

Эта информация полезна, но я хочу использовать ее дляприведите название раздела и имя типа для ответа. В опциональном я хотел бы иметь возможность отображать да или нет вместо 1 или 0.

Это код моего контроллера

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

}

Если я смотрю на Vue DevTools, я вижу темассивы данных полны данных, но я не уверен, как получить к ним доступ.

Это моя таблица

<el-table
    :data="survey_questions">
        <el-table-column
            prop="question"
            label="Pregunta">
        </el-table-column>
        <el-table-column
             prop="survey_section_id"
             label="Seccion">
        </el-table-column>
        <el-table-column
              prop="response_type_id"
              label="Tipo de Respuesta">
         </el-table-column>
         <el-table-column
              prop="optional"
              label="Opcional">
          </el-table-column>
</el-table>

Если я изменю реквизит на что-то вроде этого, ничего не появляется, оно просто пустоеили я получаю сообщение об ошибке

<el-table-column
    label="Seccion">
        <template slot-scope="scope">
            <p> {{ scope.row.survey_section.title }} </p>
        </template>
</el-table-column>

Error in render: "TypeError: Cannot read property 'title' of undefined"

Answer 1

Я бы использовал formatter: https://element.eleme.io/#/en-US/component/table#table-column-attributes

В вашем коде это будет выглядеть примерно так:

<el-table
    :data="survey_questions">
        <el-table-column
            prop="question"
            label="Pregunta">
        </el-table-column>
        <el-table-column
             prop="survey_section_id"
             label="Seccion"
             :formatter="surveyFormatter">
        </el-table-column>
        <el-table-column
              prop="response_type_id"
              label="Tipo de Respuesta">
         </el-table-column>
         <el-table-column
              prop="optional"
              label="Opcional"
              :formatter="optionalFormatter">
          </el-table-column>
</el-table>

<script>
  export default {
    data() {
      return {...}
    },
    methods: {
      surveyFormatter(row, column, cellValue) {
        return row.survey_section.title;
      }, 
      optionalFormatter(row, column, cellValue) {
        return cellValue ? 'yes' : 'no';
      }
    }
  }
</script>