Vue — как показать массив данных в таблице?
Я пытаюсь создать компонент, который при загрузке страницы выполняет запрос к моему серверу, получает некоторые данные и показывает эти данные в vuetify-datatable. Мне удалось получить данные, но моя таблица их не покажет, так как она просто пуста.
Вот компонент:
<template>
<v-simple-table dark>
<template v-slot:default>
<thead>
<tr>
<th class = "text-left">
Asset
</th>
<th class = "text-left">
Total
</th>
</tr>
</thead>
<tbody>
<tr
v-for = "item in balances"
:key = "item.asset">
<td>{{ item.asset }}</td>
<td>{{ item.total }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</template>
<script>
var balancesArr = []
fetch('http://127.0.0.1:8000/binance/getbalance')
.then(response => response.json())
.then(data => {
balancesArr = data
console.info(balancesArr)
})
export default {
data () {
return {
balances: balancesArr,
}
},
}
</script>
Вот main.js:
import Vue from "vue/dist/vue.js";
import Vuex from "vuex";
import storePlugin from "./vuex/vuex_store_as_plugin";
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
Vue.use(Vuetify);
Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;
Vue.use(VueAxios, axios)
new Vue({
render: h => h(App)
}).$mount('#app')
И html-файл:
<div id = "app">
<app></app>
</div>
Я успешно вижу, что данные печатаются на моей консоли, но ничего не отображается в таблице. Что я здесь делаю неправильно?
Большое спасибо! Я пробовал это, но получил неопределенную ошибку на балансах
Вам нужно будет быть намного более конкретным, чем «получил неопределенную ошибку на балансах». Это может означать слишком многое.
Я имею в виду, что ошибка в том, что баланс не определен: Uncaught (в обещании) ReferenceError: балансы не определены
О, проблема в том, что вы извлекаете данные за пределы экземпляра. Вы должны получить после того, как компонент смонтирован. Если вы сделаете это раньше, вы можете получить ответ до того, как компонент будет смонтирован, поэтому ответ будет некуда поместить. Конечно, вы можете сохранить его, а затем поместить на компонент в mounted(). Однако наиболее распространенный способ сделать это — поместить fetch() внутрь mounted().
Да, я понимаю, что я должен сделать это по-другому. Я пришел из JQuery, просто новичок в Vue, и я чувствую себя ошеломленным, если не сказать больше.
Давайте продолжим обсуждение в чате.
Ответы 2
Вы делаете это неправильно, вы неправильно используете vue:
<script>
export default {
created() {
fetch('http://127.0.0.1:8000/binance/getbalance')
.then(response => response.json())
.then(data => {
this.balances = data
})
},
data () {
return {
balances: [],
}
},
}
</script>
Спасибо за ваш ответ. Очень возможно, что я использую его неправильно, я только начал работать с Vue и пытаюсь понять это. Я пробовал это, но я все еще получаю пустую таблицу
@ Томер, как ты видишь, не так важно отвечать первым. Гораздо важнее дать полный ответ. Вместо того, чтобы заявлять, что «вы делаете это неправильно», объясните конкретно, что ОП делает неправильно и, что более важно, почему это неправильно. Публикация кода без его объяснения гораздо менее полезна, чем объяснение проблемы и предлагаемого вами решения.
Цитата
Вы можете использовать хук жизненного цикла mounted для получения данных о начальной загрузке страницы.
export default {
data() {
return {
balances: [],
}
},
mounted() {
this.fetchData()
},
methods: {
fetchData() {
fetch('http://127.0.0.1:8000/binance/getbalance')
.then(response => response.json())
.then(data => {
this.balances = data
})
}
}
}
вы также можете использовать created для получения данных на начальной странице, созданной перед монтированием для справки введите здесь описание ссылки например.
export default {
data() {
return {
balances: [],
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
fetch('http://127.0.0.1:8000/binance/getbalance')
.then(response => response.json())
.then(data => {
this.balances = data
})
}
}
}
Спасибо за ваш ответ! Я пробовал это, но таблица все еще пуста
Вы можете поместить журнал консоли в строку this.balances = data и увидеть, как вы получаете данные
Да, я пытался добавить console.info, но он не запускается
Я обновил свой, вот что я получил: [Vue warn]: $listeners только для чтения, [Vue warn]: $attrs только для чтения. Я пытаюсь понять, что вызывает эти ошибки
Просто объявите
balancesпустым массивом вdata:data: () => ({ balances: [] }). Это сделает его реактивным, и когда он изменится (после того, как вы получите данные), шаблон будет уведомлен об изменении.