axiosでAPI通信をおこなってGETした値をElementUIのtableに表示したいです。
https://ushirock.hateblo.jp/entry/2019/01/02/045931
上記のサイトを参考に実装を行いましたが特にエラーもなく、値が表示されないだけです。
通常のv-for="test in tests" :key="test.content"ではテーブルに表示されませんでした。
ElementUI
"element-ui": "^2.15.1",
"nuxt": "^2.15.3"
該当のソース
<template> <div> <el-main> <el-table :tests="tests" style="width: 100%"> <el-table-column label="" prop="content" width="180"> <template slot-scope="scope"> {{ scope.row.content }} </template> </el-table-column> <el-table-column prop="created_at" label="投稿日時" width="180"> <template slot-scope="scope"> {{ scope.row.created_at }} </template> </el-table-column> <el-table-column prop="updated_at" label="更新日時" width="180"> {{ scope.row.updated_at }} </el-table-column> </el-table> </el-main> </div> </template> <script> import axios from 'axios'; export default { data() { return { tests: [] } }, methods: { getTest() { const url = 'http://localhost:8000/api/test'; axios.get(url) .then(res => { this.tests = res.data; }) .catch(error => { console.log(error.response); }); } }, created() { this.getTest() }, } </script>
あなたの回答
tips
プレビュー