如何从本地存储读取json并在VUE中显示数据

Question

我有一个 json(books.json)，我想用 VUE 在我的网页上将它的内容显示到一个列表中。 我似乎无法成功。 代码如下所示：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <span>{{items}}</span> <ul> <li v-repeat="items"> <span class="name">{{books.name}}</span><br> <span class="genre">{{books.genre}}</span> </li> </ul> </div> </body> <script> var app= new Vue({ data: { items: null }, created: function () { this.fetchData(); }, methods: { fetchData: function () { var self = this; $.get( 'books.json', function( data ) { self.items = data; }); } } }); </script> </html>

有人可以帮我吗？ 谢谢

Answer 1

请更新您的 vue 版本。 我已将v-repeat替换为v-for并将其安装到#app 。 你也可以在你的 vue 实例中使用el而不是$mount 。 此外，我已将数据更改为函数。 （ https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function ）

 const app = new Vue({ data() { return { items: null } }, created: function () { this.fetchData(); }, methods: { fetchData: function () { var self = this; // test data this.items = [{ name: 'Test-Name', genre: 'My Genre' }]; // Commented out because we don't have this file. /* $.get( 'books.json', ( data ) => { self.items = data; }); */ } } }); app.$mount('#app');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/vue"></script> <div id="app"> <span>{{items}}</span> <ul> <li v-for="book in items" :key="book.name"> <span class="name">{{book.name}}</span><br> <span class="genre">{{book.genre}}</span> </li> </ul> </div>

如何从本地存储读取json并在VUE中显示数据

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-12-12 10:51:06

如何从本地存储读取json并在VUE中显示数据

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-12-12 10:51:06

解决方案1
0 已采纳 2018-12-12 10:51:06