Почему я не могу дотянуться до свойства?

Question

[beduin01]

<div>{{my_data['2018-07-11']}} </div>
Выведет:
{ "may": 4, "june": 8, "april": 5 }

Вот этот код:
<div>{{my_data['2018-07-11']['may']}} </div>
Выведет 4. Но на консоль я получу ошибку:

Error in render: "TypeError: Cannot read property 'may' of undefined"

Сам код приложения:

var app = new Vue({
  el: '#app',
  data: {
    my_data: {},
    mess: 'hello world'
  },

     created: async function(){
	  	url = 'http://dlang.ru/test'
		const response = await fetch(url);
		this.my_data = await response.json();

    } 	
})

Answer 1

[Evgeny Kulakov]

Потому что на момент рендеринга шаблона данные ещё не пришли и объект с данными пустой.

Comments

[beduin01]

Почему тогда первый вариант работает? И как решить проблему?

[Алексей Ярков]

beduin01, потому что сначала ошибка, потом данные подтянулись, произошел перерендер и данные вывелись.

[Evgeny Kulakov]

beduin01, в первом варианте у вас будет my_data['2018-07-11'] = undefined в первоначальный момент, но оно сразу заменится пришедшими данными. Можете так написать:

my_data['2018-07-11'] && my_data['2018-07-11']['may']

[beduin01]

Evgeny Kulakov, а почему во втором варианте не может заменить данными?

[Evgeny Kulakov]

beduin01, потому что в первоначальный момент my_data['2018-07-11'] = undefined и вы пытаетесь сделать undefined['may'] и соответственно получаете ошибку.

[beduin01]

Evgeny Kulakov, а, тобишь обращаюсь к свойству элемента который еще сам undefined? Как можно красиво решить проблему? Или только ваш вариант?

[beduin01]

И как быть если мне это свойство в computed надо посчитать. Там то эти данные будут undefined

[Evgeny Kulakov]

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

<div v-if="my_data">{{my_data['2018-07-11']['may']}} </div>

data: {
    my_data: null,
    mess: 'hello world'
  },

[beduin01]

Evgeny Kulakov, А как быть если мне это нужно эту переменную которая undefined в computed использовать?

[Evgeny Kulakov]

beduin01, аналогично проверять в computed на доступность.

[DevMan]

И это человек парафинит здесь всё подряд и говорит что учить o_O