Vue вывод данных из гугл таблицы, как добраться до нужных данных?

Question

[Капитан Какао]

Привет хочу вытащить из гугл таблиц название товаров и цены (старая и новая цена)
Табличка выглядит следующим образом

Вот Json таблички

https://spreadsheets.google.com/feeds/list/1iuJBDWtadHG4RHxUHhGcgdpmY_dffjLgWyRsf01mHAY/1/public/values?alt=json

Вот VUE запрос

new Vue({
  el: '#test',
  data() {
    return {
      info: null
    };
  },
  mounted() {
    axios
      .get('https://spreadsheets.google.com/feeds/list/1iuJBDWtadHG4RHxUHhGcgdpmY_dffjLgWyRsf01mHAY/1/public/values?alt=json')
      .then(response => (this.info = response));
  }
});

И HTML разметка

<div class="" id="test">
   <div v-for="item in info">
     {{ item.title }}
   </div>
</div>

Понимаю что затуп в запросе, но что именно зх.

Если сделать переменную просто {{ info }}

<div class="" id="test">
  {{ info }}
</div>

то данные с json прилетают

Answer 1

[0xD34F]

data: () => ({
  info: null,
  columns: [
    { title:     'title', key:        'title' },
    { title: 'old price', key: 'gsx$oldprice' },
    { title: 'new price', key: 'gsx$newprice' },
  ],
}),
mounted() {
  axios
    .get('https://spreadsheets.google.com/feeds/list/1iuJBDWtadHG4RHxUHhGcgdpmY_dffjLgWyRsf01mHAY/1/public/values?alt=json')
    .then(r => this.info = r.data.feed.entry);
},

<table>
  <thead>
    <tr>
      <th v-for="col in columns">{{ col.title }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in info">
      <td v-for="col in columns">{{ item[col.key].$t }}</td>
    </tr>
  </tbody>
</table>

Comments

[Капитан Какао]

Воуууу, бро, большое спаисбо!!!

Answer 2

[Дмитрий Гололобов]

axios
.get('https://spreadsheets.google.com/feeds/list/1iuJBDWtadHG4RHxUHhGcgdpmY_dffjLgWyRsf01mHAY/1/public/values?alt=json')
.then(response => {
    this.info = response.data.feed.entry
});

<div v-for="item in info">
     {{ item.title['$t'] }}
   </div>

Comments

[Капитан Какао]

Чёт не сработало(