从 Vue.js 中的 JSON 文件导入数据而不是手动数据
Posted
技术标签:
【中文标题】从 Vue.js 中的 JSON 文件导入数据而不是手动数据【英文标题】：Import data from a JSON file in Vue.js instead of manual data 【发布时间】：2019-04-08 16:12:55 【问题描述】：这是我第一次使用 Vue.js。我制作了这个应用程序，它使用了我在脚本中手动添加的数据。现在我希望能够添加一个从中获取数据的 JSON 文件，但我不知道该怎么做。您可以在下面找到我的代码。
html：
<div id="app">
<div class="search-wrapper">
<input type="text" v-model="keyword" placeholder="Zoek telefoon..." />
</div>
<div class="wrapper">
<table style="width:100%; text-align: left;">
<tr>
<th style="text-align: left; width: 33%">Telefoon</th>
<th style="text-align: left; width: 33%">Scherm</th>
<th style="text-align: left; width: 33%">Batterij</th>
</tr>
</table>
<div v-for="post in filteredList">
<table style="width:100%; text-align: left">
<tr style="text-align: left;">
<td style="text-align: left; width: 33%"> post.title </td>
<td style="text-align: left; width: 33%"> post.scherm </td>
<td style="text-align: left; width: 33%"> post.batterij </td>
</tr>
</table>
</div>
</div>
Vue.js：
var app = new Vue(
el: '#app',
data:
keyword: '',
postList: [
title: 'A', scherm: '35', batterij: '15' ,
title: 'B', scherm: '65', batterij: '25' ,
title: 'C', scherm: '40', batterij: '35' ,
title: 'D', scherm: '35', batterij: '75' ,
title: 'E', scherm: '20', batterij: '45' ,
],
,
computed:
filteredList()
return this.postList.filter((post) =>
return post.title.toLowerCase().includes(this.keyword.toLowerCase());
);
);
编辑：
我的代码现在看起来像这样，但它现在只返回 post.title 等。
头：
<head>
<title>Test Vue JSON</title>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
HTML：
<div class="search-wrapper">
<input type="text" v-model="keyword" placeholder="Zoek telefoon..." />
</div>
<div class="wrapper">
<table style="width:100%; text-align: left;">
<tr>
<th style="text-align: left; width: 33%">Telefoon</th>
<th style="text-align: left; width: 33%">Scherm</th>
<th style="text-align: left; width: 33%">Batterij</th>
</tr>
</table>
<div v-for="post in filteredList">
<table style="width:100%; text-align: left">
<tr style="text-align: left;">
<td style="text-align: left; width: 33%"> post.title </td>
<td style="text-align: left; width: 33%"> post.scherm </td>
<td style="text-align: left; width: 33%"> post.batterij </td>
</tr>
</table>
</div>
</div>
脚本：
import posts from "../posts.json";
el: '#app',
data:
keyword: '',
postList: [],
,
computed:
filteredList()
return this.postList.filter((post) =>
return post.title.toLowerCase().includes(this.keyword.toLowerCase());
);
,
mounted()
axios
.get('posts.json')
.then(response => (this.postList = response.data))
JSON（posts.json）：
[
title: "Samsung Galaxy S9", scherm: "35", batterij: "15" ,
title: "Huawei P10", scherm: "65", batterij: "25" ,
title: "iPhone X", scherm: "40", batterij: "35" ,
title: "Huawei P20 Lite", scherm: "35", batterij: "75" ,
title: "Samsung A9", scherm: "20", batterij: "45" ,
]
【问题讨论】：
【参考方案1】：Vue cli：
将该数据设置在名为 posts.json 的文件中，然后按如下方式导入：
import posts from "./posts.json";
并将其分配给 mounted 钩子中的 postList ：
computed:
....
,
mounted()
this.postList=posts
CDN
在您的情况下，您应该使用像 axios 这样的 AJAX api
computed:
....
,
mounted()
axios
.get('posts.json')
.then(response => (this.postList = response.data))
你应该包括以下脚本：
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
完整示例
var app = new Vue(
el: '#app',
data:
keyword: '',
postList: []
,
computed:
filteredList()
return this.postList.filter((post) =>
return post.title.toLowerCase().includes(this.keyword.toLowerCase());
);
,
mounted()
axios.get('https://jsonplaceholder.typicode.com/posts')
.then((response)=>
this.postList=response.data;
)
);<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
</head>
<body>
<div id="app">
<div class="wrapper">
<table style="width:100%; text-align: left;">
<tr>
<th style="text-align: left; width: 33%">ID</th>
<th style="text-align: left; width: 33%">Title</th>
<th style="text-align: left; width: 33%">Body</th>
</tr>
</table>
<div v-for="post in postList">
<table style="width:100%; text-align: left">
<tr style="text-align: left;">
<td style="text-align: left; width: 33%"> post.id </td>
<td style="text-align: left; width: 33%"> post.title</td>
<td style="text-align: left; width: 33%"> post.body </td>
</tr>
</table>
</div>
</div>
</div>
</body>【讨论】：
以上是关于从 Vue.js 中的 JSON 文件导入数据而不是手动数据的主要内容，如果未能解决你的问题，请参考以下文章