Как выполнить computed только после выполнения функции?

Question

beduin01 @beduin01

Vue.js

Как выполнить computed только после выполнения функции?

Проблема в том, что я получаю ошибку: Cannot read property 'april' of undefined"

Код следующий:

var app = new Vue({
  el: '#app',
  data: {
    my_dates: {},
  },
    computed: {
      myvalue: function () {
        return Number(this.my_dates['2018-04-23']['april']) + Number(this.my_dates['2018-04-23']['may'])
      }
    },

    methods: 
    {
      getTableData: function()
      {
          // GET /someUrl
      this.$http.get('http://127.0.0.1:8000/ponizovka_get_data').then(response => {
        // get body data
        this.my_dates = response.body;

      }, response => {
        // error callback
      });
      }
    },

    created: function(){
        this.getTableData()
    }

})

При этом вывод в шаблоне:
{{my_dates['2018-04-23']}} работает.
Однако к my_dates['2018-04-23']['april'] обратиться не получается. Тоесть оно выводится, но ругается (см выше).

Я хочу сделать так, чтобы у меня computed выполнялся только после того как все данные загружены? Хотя возможно проблема в том, что Vue не обрабатывает вложенный объект т.к. my_dates['2018-04-23'] он видит, а вот my_dates['2018-04-23']['april'] уже нет

Вопрос задан более трёх лет назад
334 просмотра

1 комментарий

Подписаться 1 Простой 1 комментарий

Сергей delphinpro @delphinpro

data: {
    my_dates: null,
}


computed: {
      myvalue: function () {
        return this.my_dates ? Number(this.my_dates['2018-04-23']['april']) + Number(this.my_dates['2018-04-23']['may']) : null;
      }
    },

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Skypro

React-разработчик с нуля

9 месяцев

Далее
Skypro

JavaScript-разработчик с нуля

9 месяцев

Далее
Skypro

Frontend-разработчик с нуля

9 месяцев

Далее

Решения вопроса 1

4 комментария

beduin01 @beduin01 Автор вопроса

Я не могу понять. Почему если я в my_data закину объект, то все работает как надо. Проблемы начинаются только когда я его значение пытаюсь получить через get запрос.
Меня устроит любой даже блокирующий вариант.

Написано более трёх лет назад
0xD34F @0xD34F Куратор тега Vue.js

beduin01,
Я не могу понять. Почему если я в my_data закину объект, то все работает как надо.

Гм-гм... А зачем вы, не зная языка, лезете фреймворки использовать?

"В my_data" - можете, всё-таки в my_dates? - кажется, так свойство у вас называется в вопросе. Почему работает... Лучше зайти с другого конца - почему не работает, когда my_dates пустой. При попытке прочитать свойство '2018-04-23' возвращается значение undeifned, потому что запрошенного свойства у объекта нет. Затем вы пытаетесь у полученного значения прочитать ещё какие-то свойства - но у undefined никаких свойств нет и быть не может, попытка обратиться к какому-либо свойству undefined приводит к ошибке. Ну, такая вот особенность языка.

Меня устроит любой даже блокирующий вариант.

Это говнокодерство. А больше мне вам сказать нечего - раз уж вы решили проигнорировать мой вопрос о том, как вы используете myvalue.

Написано более трёх лет назад

beduin01 @beduin01 Автор вопроса

Смотрите. Вот пример который будет работать после копи-паста:

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<script src="https://unpkg.com/vue"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>

<div id="app">
	<!-- надо получить доступ к myvalue из computed -->
  <p>{{ myvalue }}</p>
  <p>{{ mess }}</p>

  <!-- выводим то что есть в mydates и пытаемся обратиться к значению месяца -->
 <p>{{my_dates['2018-07-10']['april']}}</p>
 <p>{{my_dates['2018-07-10']['may']}}</p>
</div>


</body>

<script>
	var app = new Vue({
  el: '#app',
  data: {
    my_dates: {},
    mess: 'hello world'
  },
    computed: {
    	// если закомментить то что ниже то заработает
      myvalue: function () {
        return Number(this.my_dates['2018-07-10']['april']) + Number(this.my_dates['2018-07-10']['may'])
      }
    },

    methods: 
    {
      getTableData: function()
      {
          // GET /someUrl
	      this.$http.get('http://dlang.ru/test').then(response => {
	        // get body data
	        this.my_dates = response.body;

	      }, response => {
	        // error callback
	      });
      }
    },

    created: function(){
        this.getTableData()
    }

})

</script>
</html>

Написано более трёх лет назад

0xD34F @0xD34F Куратор тега Vue.js

То есть, всё-таки в шаблоне выводите. И в чём проблема использовать v-if?

UPD. А, и в computed тоже используете - ну так добавьте проверку, что объект есть, прежде чем его свойства читать.

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

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

Vue.js

Простой
Как использовать иконки unicode в vue-fortawesome?
- 1 подписчик
- 08 окт.
- 118 просмотров
2

ответа
Vue.js

Простой
Как сделать модальное окно, которое всегда рядом с кнопкой, его вызывающей?
- 1 подписчик
- 24 сент.
- 138 просмотров
1

ответ
Android

+1 ещё

Средний
Как сделать запрос на Push уведомление для Android в Quasar Caricator?
- 1 подписчик
- 05 сент.
- 90 просмотров
1

ответ
Vue.js

Средний
Как глубоко сравнить копию реактивного объекта и реактивный объект Vue 2?
- 1 подписчик
- 21 авг.
- 150 просмотров
2

ответа
Android

+2 ещё

Сложный
Как в Capacitor приложение обновить через apk?
- 1 подписчик
- 20 авг.
- 122 просмотра
1

ответ
Vue.js

+2 ещё

Простой
Docker, Laravel, Vue — The POST method is not supported for route api/tasks/$%7Bid%7D. Supported methods: PUT, DELETE?
- 1 подписчик
- 09 авг.
- 260 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как сделать код с отменой запросов и переотправкой более простым?
- 1 подписчик
- 05 авг.
- 293 просмотра
2

ответа
Vue.js

Простой
Как подружить Quasar и Motion?
- 1 подписчик
- 02 авг.
- 78 просмотров
1

ответ
Vue.js

+1 ещё

Простой
Как в Nuxt UI добавить собственный цвет для темизации?
- 1 подписчик
- 27 июл.
- 150 просмотров
0

ответов
Vue.js

+1 ещё

Простой
Как правильно писать компоненты-обёртки во Vue 3?
- 1 подписчик
- 25 июл.
- 241 просмотр
3

ответа
Показать ещё Загружается…

Fullstack разработчик (Laravel + Vue.js/React.js)

Nomadic Soft

от 1 600 до 2 240 $

JS Fullstack Инженер (Node.js + Vue.js)

SteadyControl • Воронеж

от 100 000 до 250 000 ₽

Project Manager / Team Lead (внутренний IT-проект, Laravel + Vue)

РПК Discovery • Екатеринбург

от 120 000 ₽

data: { my_dates: null, } computed: { myvalue: function () { return this.my_dates ? Number(this.my_dates['2018-04-23']['april']) + Number(this.my_dates['2018-04-23']['may']) : null; } },

Answer 1 · 2018-07-11 18:55:28

Вопрос - а как вы используете myvalue? Если где-то в шаблоне, то v-if исправит ситуацию:

<div v-if="my_dates['2018-04-23']">{{ myvalue }}</div>

В противном случае есть смысл делать проверку на существование нужного свойства в my_dates и действовать по обстоятельствам, например так:

myvalue() {
  сonst date = this.my_dates['2018-04-23'];
  return date ? Number(date.april) + Number(date.may) : null;
}

Как выполнить computed только после выполнения функции?

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

Минуточку внимания

Войдите на сайт