Есть такая проблемка, вожусь несколько дней не могу решить. Есть база данных на firebase делаю к ней GET запрос с помощью axios, вытягиваю данные из .json файла, конвертирую их и записываю в массив - присваивая каждой записи свой уникальный id. Задача: нужно вывести, по нажатию кнопки циклом, или как - передать данные в таблицу, или списком, либо обычными п-тегами. Сейчас только могу выводить определённую строку задав ей id.
Axios GET запрос:
fetchData () {
axios.get('https://db-http.firebaseio.com/devices.json')
.then(res => {
console.log(res)
const data = res.data
const devices = []
for (let key in data) {
const device = data[key]
device.id = key
devices.push(device)
}
console.log(devices)
this.named = devices.named
this.napruga = devices.napruga
this.location = devices.location
})
.catch(error => console.log(error))
}
Вот как пытаюсь вывести в теги:
<form @submit.prevent="fetchData">
<p >Name:{{named}}-Location:{{location}}-Napruga:{{napruga}}</p>
<ul v-if="devices && devices.length">
<li v-for="device of devices" :key="device.id">
<p>{{device.named}}</p>
<p>{{device.location}}</p>
<p>{{device.napruga}}</p>
</li>
</ul>
<div class="submit">
<button type="submit">Submit</button>
</div>
</form>
Вот как получается вывести, но только одну строку заданную с индексом:
fetchData () {
axios.get('https://db-http.firebaseio.com/devices.json')
.then(res => {
console.log(res)
const data = res.data
const devices = []
for (let key in data) {
const device = data[key]
device.id = key
devices.push(device)
}
console.log(devices)
this.named = devices[1].named
this.location = devices[1].location
this.napruga = devices[1].napruga
})
.catch(error => console.log(error))
}
}
Вот результаты со скринами + как данные передаются в консоль и массив: нужно сделать так чтобы все данные которые передаются, выводились построчно, а не только одна строка по заданному индексу.
