前提・実現したいこと
現在,Vue.jsを用いてWeb SPAについて自主勉強を進めていますが,以下の点で詰まってしまい,先に進めずにいます.
実装したいことは,JSONのリストより各コンテンツを生成し,ボタンクリックで関数を実行しようとしています.(特にUI/UXの設計において,処理の入口で躓いています.)
試しに関数が実行されればコンソールに渡した内容を表示できるようにしたいと思っていますが,その処理がうまく行かずに失敗しています.
プログラムのソース
専用にテスト環境を構築.それでもエラーが発生したため,私のフレームワークに対する理解不足と判断しました.
divの階層構造については,レイアウトの関係で深くなっております.
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <!-- bootstrap:4, vue.js:2.5.13 読み込みの部分は省略 --> 9 <title>title</title> 10</head> 11 12<body> 13 <div> 14 <div> 15 <div> 16 <div id="elem"> 17 <template v-for="list in Lists"> 18 <div> 19 <div> 20 <div> 21 <button class="btn btn-outline-success btn-sm" v-on:click="item(list.id)">test</button> 22 </div> 23 </div> 24 </div> 25 </template> 26 </div> 27 <script src="core.js"></script> 28 </div> 29 </div> 30 </div> 31</body> 32 33</html>
Javascript
1var Daily = new Vue({ 2 el: '#elem', 3 delimiters: ["[[", "]]"], 4 data: function () { 5 return { 6 Lists: [{"id":1},{"id":2},{"id":3}] 7 } 8 }, 9 Methods: { 10 item: function (id) { 11 console.log(id); 12 } 13 }, 14 created: function () { 15 } 16})
リスト構造は,コンテンツごとに日付,タイトル,ID等でJSONで定義されます.このプログラムではテスト用でidのみですが,それ以外にも定義されるため構造の見直しは検討しておりません.
発生している問題・エラーメッセージ
[Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Uncaught TypeError: item is not a function
補足
Windows 10 64bit
Chrome にて実行.
HTMLとJSのみなので,Apache等Webサーバーを介さずに実行しています.
作り方の方向として,こっちのフレームワークのほうが簡単だよと言ったコメントや**データ構造もこう変更してみたら?**などのコメントも歓迎します.
(初心者なため,どこから入っていいのかわからずに進めています.)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/03/01 02:55
2018/03/01 03:00 編集