@this__all

Как вывести ответ от сервера в правильном формате?

Нужно выводить результат опросов, который прошёл пользователь и выводить вопрос ответ, а у меня только первый вопрос показывается.

Вот ответ от сервера:

5ea095f7306a5591245598.jpeg

Мой код

<template>
  <section class="results">
    <h1>Результаты</h1>
    <div class="results-blocks">
      <p>Здесь, вы можете узнать свои результаты, после прохождения опроса(ов).</p>
      <div v-for="(item, index) in results" v-bind:key="index" class="results-block">
        <div class="results-block">
          <div class="results-block__first">
            <span>{{ item.title }}</span>
          </div>
          <div class="results-block__second">
            <div>
              <span>{{ item.questions[index]['description'] }}</span>
              <span v-if="item.questions[index]['answer'] == 2">Да</span>
              <span v-if="item.questions[index]['answer'] == 1">Нет</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import axios from "axios";

export default {
  metaInfo: {
    title: "Результаты"
  },
  data: () => ({
    results: null
  }),
  created() {
    axios
      .get("http://localhost/api.polls-rksi/public/api/results-user", {
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + this.$store.getters.getToken
        }
      })
      .then(response => {
        if (response.status == 200) {
          this.results = response.data["results"];
        }
      });
  }
};
</script>


Как должно выглядеть

5ea0961338c8a504173992.jpeg

А вот как у меня получилось

5ea0962584168247513436.jpeg
  • Вопрос задан
  • 152 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Замените

<div>
  <span>{{ item.questions[index]['description'] }}</span>
  <span v-if="item.questions[index]['answer'] == 2">Да</span>
  <span v-if="item.questions[index]['answer'] == 1">Нет</span>
</div>

на

<div v-for="n in item.questions">
  <span>{{ n.description }}</span>
  <span>{{ n.answer | answer }}</span>
</div>

filters: {
  answer: val => [ 'Нет', 'Да' ][val - 1],
  ...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы