[英]how to get data from JSON file in Vue.js?
我有具有這種結構的“modified_data.json”JSON 文件。
{
"data": [
[
{
"account_id": " "
"account_name": " "
},
{
"account_id": " "
"account_name": " "
},
{
"account_id": " "
"account_name": " "
},
{
"account_id": " "
"account_name": " "
}
],
[
{
"account_id": " "
"account_name": " "
},
{
"account_id": " "
"account_name": " "
},
{
"account_id": " "
"account_name": " "
}
],
[
{
"account_id": " "
"account_name": " "
},
{
"account_id": " "
"account_name": " "
},
{
"account_id": " "
"account_name": " "
}
]
]
}
我想從每個數組中獲取第一個對象的 account_name ...
有沒有人可以給我一個解決方案??
現在我使用Vue.js來顯示它,我可以用python獲取每個數據,但是Vue.js對我來說還不熟悉......請幫助我:)
好吧,你將不得不添加你為 Vue 編寫的代碼
如果你在一個 vue 應用程序中,你可以做這樣的事情
<script>
import json from './json/data.json'
export default{
data(){
return{
myJson: json
}
}
}
</script>
如果你在一個 html 頁面中寫它。 您可以分兩步完成。
第一個是將文件鏈接添加為腳本
<script src="../file.json"></script>
然后在 vue 腳本部分中,您可以將其分配給數據對象。
var ele = new Vue({
el : "#YourElement",
data : ObjName
});
“ObjName”是文件中 json 對象的名稱。
ObjName :
{
"data": [
[
{
"account_id": " "
"account_name": " "
}
您可以使用計算屬性,該屬性會被動地獲取每個數組的第一個對象的account_name
屬性:
const data = { "data": [ [ { "account_id": "11", "account_name": "name11" }, { "account_id": "12", "account_name": "name12" }, { "account_id": "13", "account_name": "name13" }, { "account_id": "14", "account_name": "name14" } ], [ { "account_id": "21", "account_name": "name21" }, { "account_id": "22", "account_name": "name22" }, { "account_id": "23", "account_name": "name23" } ], [ { "account_id": "31", "account_name": "name31" }, { "account_id": "32", "account_name": "name32" }, { "account_id": "33", "account_name": "name33" } ] ] } new Vue({ el: '#demo', data() { return { data: data.data } }, computed: { firstAccountNames() { return this.data.map(dataSet => dataSet[0].account_name) } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <ul> <li v-for="name in firstAccountNames"> {{ name }} </li> </ul> </div>
我解決了! 這是代碼!
var app = new Vue({
el: '#app',
data: {
datas: []
},
computed: {
getAccountNames() {
return this.datas.map(dataSet => dataSet[0].account_name)
}
},
mounted() {
var self = this
$.getJSON("modified_data.json", function(json_data) {
self.datas = json_data.data
})
}
})
無論如何,另一個問題......“this”和“self”有什么區別? 我認為“self”等於“this”,但是當我只使用“this”時,它有錯誤,但“self”效果很好……誰能告訴我區別?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.