Почему цикл в template не дожидается promise?

Question

[bqio]

Есть цикл в шаблоне:

<td v-for="type in rank">
  <img v-for="hero in type" :src="load(hero)">
</td>

И есть метод:

async load (name) {
  const response = await axios.jsonp(`url/${name}`)
  return response.url
}

Почему src получает object Promise?

Comments

[0xD34F]

Я наверное что-то очень важное про vue не знаю. Помогите восполнить пробел - расскажите, откуда вы взяли, что v-for умеет дожидаться разрешения промисов?

[bqio]

0xD34F, из обычного JS for :(

[bqio]

0xD34F, как тогда правильно тут поступить?

[0xD34F]

Дмитрий Михальцов,

из обычного JS for :(

Это как? Нафантазировали себе чего-то там, и удивляетесь - чего это ваши фантазии реальности не соответствуют. Смешно.

как тогда правильно тут поступить?

Оформите вопрос нормально, тогда и поговорим.

[Robur]

Дмитрий Михальцов, это вы зря так. К тому же "обычный" for так же не ждет промисов. Если вы только вы туда асинхронный итератор не затолкаете. И v-for никакого отношения к :src и к функции load не имеет - он спокойно пробегает по type создает элементы и завершает свою работу. Делайте bind к переменной куда загрузите значение, а не к промису, load вызывайте отдельно.

[bqio]

Robur, в массиве type содержатся лишь имена героев. Чтобы мне получить URL картинки героя (для src), я должен отправить запрос на сервер и запросить URL картинки героя по его имени. Хранить именно сами URL нет возможности, они не статичные.

[bqio]

Robur, неужели мне нужно изначально загрузить все изображения через промис.олл, а уже потом рендерить?

[Robur]

Можно и так

[alex]

Дмитрий Михальцов, сделайте computed свойство из rank. в нем циклом проходитесь и добавляете новое Поле src и на каждой итерации делаете запрос и результат пишите в это поле

Answer 1

[Alex]

Потому, что цикл v-for синхронный. Он получает от вашей функции ответ (промис) и выводит его. Он не смотрит что это за ответ и никак его не изменяет (Не дожидается промиса).