如何使用 API 中的数据填充图表
<script>
import VueCharts from 'vue-chartjs'
import { Pie, Bar } from 'vue-chartjs'
import axios from 'axios'
export default {
data() {
return {
dailyLabels: [] ,
dailyData: []
}
},
extends: Bar,
mounted() {
// Overwriting base render method with actual data.
this.renderChart({
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday ', 'Friday', 'Saturday', 'Sunday'],
datasets: [
{
label: 'Daily Students',
backgroundColor: '#f87979',
data: [12, 20, 1, 50, 10, 40, 18]
}
]
})
},
created() {
axios.get(`https://localhost:44379/api/DailyStudents`)
.then(response => …我有一个困境正在构建一个应用程序来跟踪学生的时间，在一个选项卡中，您可以看到学生列表和他们本季度的总时数，还有一个查看更多按钮，打开一个对话框“弹出窗口”，您显示该特定学生的个人资料。
现在，如果您单击按钮，我将使用“@click="dialog = true”打开对话框，仅此而已！
我的问题如何将学生 ID 传递到此页面，以便我可以联系 ye API 并获取学生信息
学生视图
<v-data-table :headers="headers"
:pagination.sync="pagination"
:items="filteredResources"
:search="search">
<template slot="items" slot-scope="props">
<td>{{ props.item.sid }}</td>
<td class="text-xs-left">{{ props.item.firstName }}</td>
<td class="text-xs-left">{{ props.item.lastName }}</td>
<td class="text-xs-left">{{ props.item.totalHours }}</td>
<td class="text-xs-left">{{ props.item.reason }}</td>
<td class="text-xs-left">
<v-btn fab dark small
color="primary"
@click="dialog = true">
<v-icon dark>edit</v-icon>
</v-btn>
</td>
</template>
<v-alert slot="no-results" :value="true" color="error" icon="warning">
Your search for "{{ searchQuery }}" found no results.
</v-alert>
</v-data-table>
脚本
<script>
import axios from 'axios'
import StudentProfile from './studentsProfile'
export …我是Vue.js的新手，所以谢谢您的帮助！！
我有一个表，该表显示了使用以下代码获得的项目的列表：
interface getResources {
title: string;
category: string;
uri: string;
icon: string;
}
@Component
export default class uservalues extends Vue {
resources: getResources[] = [];
created() {
fetch('api/Resources/GetResources')
.then(response => response.json() as Promise<getResources[]>)
.then(data => {
this.resources = data;
});
}
}
这是我的桌子
<div class="panel panel-default">
<div class="panel-heading" style="font-weight:bold"><span class="glyphicon glyphicon-align-justify"></span> All Resources</div>
<div class="row">
<div class="search-wrapper panel-heading col-sm-12">
<input class="form-control" type="text" v-model="searchQuery" placeholder="Search" />
</div>
</div>
<div class="panel-body" style="max-height: 400px;overflow-y: scroll;">
<table v-if="resources.length" class="table">
<thead>
<tr>
<th>Resource</th>
</tr> …我使用 Vuetify 示例向我的项目添加一个下拉列表，并且发生这种情况
该列表位于我的页面底部，我猜是 CSS，但尝试找出哪个部分有点令人困惑。
代码
<v-container>
<v-layout wrap align-center id="new">
<v-flex xs12 sm6 d-flex>
<v-select :items="items"
label="Standard"></v-select>
</v-flex>
</v-layout>
</v-container>
脚本
data: () => ({
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
}),