Как сортировать json ответ в vue.js?

Question

[jekanok]

Вот код, я не могу понять как вызвать сортировку, если данные проходят с файла?(пишите по сути)

<template>
  <div>
    <div class="content" v-for="(infos, index) in sortedInfo " :key="index">
      <div class="row">
        <div class="col-md-4">
          <div class="tiket-buy">
            <div class="logo_brand">
              <img src="../assets/logo_brand.svg" alt>
            </div>
            <div class="tiket_btn">
              <button type="button" class="btn btn-primary btn-lg">
                Купить
                <br>
                за {{ convertCurrency(infos.price) | money}}
                <i class="fas fa-ruble-sign"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="col-md-8">
          <div class="tiket-info">
            <div class="row">
              <div class="col-md-4">
                <div class="tiket_time">
                  <span>{{infos.departure_time}}</span>
                </div>
              </div>
              <div class="col-md-4">
                <div class="tiket_transfer">
                  <span v-if="infos.stops > 0 && infos.stops < 2">{{infos.stops}} ПЕРЕСАДКА</span>
                  <span
                    v-if="infos.stops > 0 && infos.stops > 1 && infos.stops < 5"
                  >{{infos.stops}} ПЕРЕСАДКИ</span>
                  <span v-if="infos.stops > 0 && infos.stops > 4">{{infos.stops}} ПЕРЕСАДОК</span>
                </div>
              </div>
              <div class="col-md-4">
                <div class="tiket_time">
                  <span>{{infos.arrival_time}}</span>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <div class="tiket_from">
                  <span>{{infos.origin}}, {{infos.origin_name}}</span>
                </div>
              </div>
              <div class="col-md-4">
                <div class="air">
                  <i class="fas fa-plane"></i>
                </div>
              </div>
              <div class="col-md-4">
                <div class="tiket_where">
                  <span>{{infos.destination_name}}, {{infos.destination}}</span>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <div class="tiket_date">
                  <span>{{infos.destination_name}}</span>
                </div>
              </div>
              <div class="col-md-4"></div>
              <div class="col-md-4">
                <div class="tiket_date">
                  <span>{{infos.departure_date}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ticketsData from "../assets/tickets.json";

export default {
  name: "tikets",
  props: ["course", "translate"],
  data() {
    return {
      info: null,
      isActive: true
    };
  },
  mounted() {
    this.info = ticketsData.tickets;
  },
  methods: {
    convertCurrency(money) {
      return money / this.course;
    }
  },
  filters: {
    money: function(value) {
      return value.toFixed(2);
    },
    computed: {
      sortedInfo() {
        this.info = ticketsData.tickets;
        console.log(this.info);
      }
    }
  }
};
</script>

Answer 1

[0xD34F]

Во-первых, разберитесь, что такое json. Характернейший признак безграмотности - когда человек путает json и объекты, получаемые при парсинге json'а.

Во-вторых, почему установка значения info происходит в mounted? Что мешает сделать это сразу в data?

В-третьих, вы плохо понимаете, что такое computed свойства (документацию-то пробовали открывать?). Следует возвращать значение, а не что-то там присваивать.

В-четвёртых, нужна сортировка - ну так сортируйте:

computed: {
  sortedInfo() {
    return [...this.info].sort((a, b) => {
      // как именно сортировать - тут уж вам виднее
    });
  },
},