Вычисляемый массив недоступен в шаблоне

Я хочу, чтобы мой массив, содержащий записи между двумя заданными датами, всегда отражал выбранные даты от-до, но простой возврат response.data из Axios в методе вычислен, похоже, не помогает. Как я могу заставить метод вычислен передавать результаты в приложение?

<template>
    <div>
      <p v-for = "event in events">{{event.title}}</p>
    </div>
</template>

<script>
export default {
    name: "App",
    data () {
        return {}
    },
    computed: {
        fromDate: function() { ..code.. },
        toDate: function() { ..code.. },
        events: function() {
            axios.get('json/' + this.fromDate + '/' + this.toDate).then(response => {
                return response.data;
            });
        }
    }
}
</script>

vue.js

02.05.2018 11:39

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

events: function() {
  axios.get('json/' + this.fromDate + '/' + this.toDate)
    .then(response => {
      return response.data;
    });
}

Во-первых, вы на самом деле ничего не возвращали внутри этой функции. И для этого вы можете использовать плагин vue-async-computed вместо

// ...
import AsyncComputed from 'vue-async-computed'

// ...
Vue.use(AsyncComputed)

// ...
asyncComputed: {
  events: function() {
    return axios.get('json/' + this.fromDate + '/' + this.toDate)
      .then(response => {
        return response.data;
      });
  }
}

Использование vue-async-computed вместе с ES7 также работает:

asyncComputed: {
  async events() {
    const response = await axios.get('json/' + this.fromDate + '/' + this.toDate)
    return response.data
  }
}

"ES7" по-прежнему возвращает обещание, а не фактическое значение, и для работы ему потребуется плагин asyncComputed.

— 02.05.2018 11:53

Спасибо! Теперь он отлично работает. Хотя я до сих пор не уверен, почему исходная функция ничего не возвращает. Данные есть, я могу записать их в консоль, если использую функцию JSON.stringify, так почему же их нельзя вернуть в переменную событий? Просто любопытно..

— 02.05.2018 13:15

02.05.2018 11:50