인프런 커뮤니티 질문&답변
작성한 질문수
q-table data 문제
작성
·
630
0
안녕하세요 강사님.
q-list에서 나오던 뉴스데이터가 q-table 사용시 들어오지 않습니다. 콘솔에도 아무 에러 없이 데이터가 잡히는 걸 볼 수 있어서 질문드립니다. 화면에는 'No data available' 이라고만 나오네요.
<template>
<div>
<q-table :data="newsList" :columns="columns" row-key="name" />
<!-- <q-list bordered>
<q-item clickable v-ripple v-for="news in newsList" :key="news.source.id">
<q-item-section class="text-h7">{{ news.title }}</q-item-section>
<q-item-section side class="text-caption">{{
fromNow(news.publishedAt)
}}</q-item-section>
</q-item>
</q-list> -->
</div>
</template>
<script>
import moment from "moment";
export default {
data() {
return {
newsList: [],
};
},
async created() {
const newsUrl =
"https://newsapi.org/v2/everything?q=Apple&from=2022-05-24&sortBy=popularity&apiKey=";
const response = await this.$axios.get(newsUrl);
console.log(response.data.articles);
this.newsList = response.data.articles;
},
methods: {
fromNow(timestamp) {
return moment(timestamp).fromNow();
},
},
};
</script>
답변 1
0
iamcwonlee
질문자
문제를 해결했지만, 같은 문제를 겪는 분들이 계실 수도 있어서 남깁니다.
qtable attribute를 ':data'가 아닌 ':rows'로 바꾸시면 테이블에 데이터가 들어옵니다.
<q-table :rows="newsList" :columns="columns" row-key="title" />