我正在尝试将结果(json)导入到 vue 组件中但不起作用?
结果:
[{"id":"d023c5e3-ca3c-4d97-933a-1112a8516eee",
"score":9001,
"updated":"2018-12-07T13:48:33.6366278",
"player":Johanna,
"category":Funny},
{"id":"398b65fb-e741-4801-be49-926b111ec871",
"score":99,
"updated":"2018-12-11T11:13:42.8312936",
"player":Johanna,
"category":Music}]
在 GetResult.js
import axios from 'axios'
const url = 'http://localhost:5000/api/Results';
export default {
data () {
return {
results: {}
}
},
created () {
axios.get(url)
.then(response => {
console.log(response.data)
this.$data.results = response.data
})
.catch(err => {
console.log(err)
})
}
}
在 Toplist.vue 中
<template>
<div class="TopList">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Score</th>
<th>category</th>
</tr>
</thead>
<tbody>
<tr v-for="result in resultList" :key="result.id">
<td>{{ result.player }}</td>
<td>{{ result.score }}</td>
<td>{{ result.category }}</td>
</tr>
</tbody>
</table>
</div>
<script>
import results from './ResultApi/GetResult.js'
export default {
name: 'TopList',
data() {
return {
resultList: results
}
}
}
</script>
最佳答案
Toplist.vue
// Ignoring the HTML part
<script>
export default {
name: 'TopList',
data() {
return {
results: []
}
},
mounted () {
this.getResults()
},
methods: {
getResults () {
axios.get(url)
.then(response => this.results = response.data)
.catch(err => console.error(err))
}
}
}
</script>
针对您的案例的示例答案。
关于javascript - 如何在vue组件中导入js文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53724194/