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

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>