Почему не рендерится список, полученный по апи?

Question

[nvdfxx]

Решил запилить тестовый проект с каким-нибудь сторонним апи. Выбор пал на wargaming open api, ибо достаточно сложен, имеет кучу эндпоинтов и систему по типу oAuth.

Задача: посредством axios отправляю get запрос, прекрасно получаю ответ, в котором массив объектов, но он не рендерится нормально в v-for почему-то, хелп
https://codepen.io/nvdfxx/pen/dQLZvr

Answer 1

[0xD34F]

А зачем вам vue версии 1? Возьмите посвежее, всё будет окей.

Comments

[nvdfxx]

Песочницу для примера дал, да в ней все работает с 2.х версией, но в самом проекте как-то нет

<template>
  <div class="home">
    <form @submit.prevent="getAccountIDfromNickname">
      <input type="text" placeholder="Enter nickname" v-model="nickname">
    </form>
    <div class="nickname-list">
      <ul v-if="nicknames.length > 0">
        <li class="nickname-list__item" :key="i" v-for="{item,i} in nicknames">
          {{item}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'home',
  data() {
    return {
      nickname: '',
      nicknames: []
    }
  },
  methods: {
    getAccountIDfromNickname() {
      axios.get(`https://api.wotblitz.ru/wotb/account/list/?application_id=d58946c3ef3b4f8124a5a5712a0d7ddb&search=${this.nickname}`)
      .then(res => {
        this.nicknames = res.data.data
        console.log(this.nicknames)
      })
      .catch(e => console.log(e))
    }
  }
}
</script>

package.json:

"dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  }

[nvdfxx]

все, увидел, я дурак, спасибо
v-for="{item,i} in nicknames"
Мораль: не ставьте фигурные скобки, ребята
Ответ про версию очень хороший, спасибо

Answer 2

[Виктор Л]

ну наверное вы перебираете объект а не массив

<div class="result">
    <ul>
      <li :key="i" v-for="(item, i) in response">{{i["nickname"]}}</li>
    </ul>
  </div>