Mxk*_*ert 1 javascript vue.js vue-component axios vuejs2
这是我第一次使用 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)：
<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 cli :
将该数据设置在一个名为的文件中posts.json并按如下方式导入：
import posts from "./posts.json";
并将其分配给您postList的mounted钩子：
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>
完整示例
import posts from "./posts.json";
computed:{
....
},
mounted(){
this.postList=posts
}
| 归档时间： |
|
| 查看次数： |
6226 次 |
| 最近记录： |