vue.jsを勉強し始めました。
以下のプログラム内容で質問があります。
window.app = new Vue({
・
・
・
data:{
tasks: [
{ finished: false, name: 'test1' },
{ finished: false, name: 'test2' },
{ finished: false, name: 'test3' },
],
}
と画面表示したいデータが入っています。
しかしこの書き方だと、要素が多くなった時に対応しきれなくなると思います。
そこで、Jsonを利用してdataを管理し、使用したいのですが、記述方法がわからず足が止まってしまいました。
どなたかご指導ご鞭撻いただけないでしょうか?
よろしくお願いいたします。
html
1<!DOCTYPE html> 2 3<html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Vue TODO</title> 7 </head> 8 <body> 9 <div id="app"> 10 <div class="container"> 11 <h1>CRUDデモ</h1> 12 <div> 13 <!-- v-bind は 「:」 で省略できる <task-form :task="newTask" :on-submit="newTask_submit"></task-form> --> 14 <form_component v-bind:task="newTask" v-bind:on-submit="newTask_submit"></form_component> 15 <hr /> 16 <button v-on:click="delete_click" class="btn btn-danger">削除</button> 17 <item_component v-for="task in tasks" :task="task"></item_component> 18 </div> 19 </div> 20 </div> 21 22 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 23 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 24 <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"> </script> 25 <script src="js.js"></script> 26 </body> 27</html> 28
javascript
1 2 3json_data_finished_name =[]; 4 5var FormComponent = { 6 template: `<form v-on:submit.prevent="form_submit"> 7 <div> 8 <input v-model="task.name" type="text"> 9 <span> 10 <button class="btn btn-primary">追加</button> 11 </span> 12 </div> 13 </form>`, 14 props: [ 15 'task', 16 'on-submit', 17 ], 18 methods: { 19 form_submit: function(event) { 20 if (!this.task.name) { 21 return; 22 } 23 this.onSubmit(event, this.task); 24 }, 25 }, 26}; 27 28var ItemComponent = { 29 template: ` <label class="list-group-item"> 30 <span v-on:click.prevent="edit_click" class="pull-right btn btn-success">編集</span> 31 <input v-model="task.finished" type="checkbox"> 32 {{task.name}} 33 </label>`, 34 props: [ 35 'task', 36 ], 37 methods: { 38 edit_click: function(event) { 39 var newName = window.prompt('Task Name', this.task.name); 40 this.task.name = newName; 41 }, 42 }, 43}; 44 45window.app = new Vue({ 46 el: '#app', 47 components: { 48 'form_component': FormComponent, 49 'item_component': ItemComponent, 50 }, 51 created:function(){ 52 $.ajax({ 53 url:"json_data.json", 54 dataType: 'json', 55 cache: false, 56 success: function(data) { 57 console.log("jsonアクセス成功"); 58 json_data_finished_name = data; 59 60 // 追加コメント ============================== 61 62 // console.log(json_data_finished_name); 以下中身 63 // object{ finished="false" , name="test1"}, 64 // object{ finished="false" , name="test2"}, 65 // object{ finished="false" , name="test3"}, ・・・ 66 67 // 読込んだ、Json(object)をtasksに落とし込みたいのですが、方法がわからないといった内容です。 68 // vue.jsというよりjavascriptの質問になるのかもしれません。 69 70 // ===================================== 71 72 }.bind(this), 73 error: function(xhr, status, error) { 74 console.log("jsonアクセス失敗"); 75 console.error(this.props.url, status, error.toString()); 76 }.bind(this), 77 78 }); 79 }, 80 data: { 81 newTask: { finished: false, name: '' }, 82 tasks: [ 83 // 追加コメント ====================================== 84 85 // 自分のイメージはこんな感じです。少し見当違いの回答かもしれません・・・ 86 // まずはJsonに登録されているnameをListに出力させたいのです・・・ 87 88 // 89 // json_data_finished_name のみ書込ことで、以下に書いたコードと同じ働きになるのではないかと考えておりました。 90 // 91 92 // ============================================ 93 { finished: false, name: 'test1' }, 94 { finished: false, name: 'test2' }, 95 { finished: false, name: 'test3' }, 96 ], 97 }, 98 methods: { 99 newTask_submit: function(event) { 100 this.tasks.unshift(this.newTask); 101 this.newTask = { finished: false, name: '' }; 102 }, 103 104 delete_click: function(event) { 105 this.tasks = this.tasks.filter(v=>!v.finished); 106 }, 107 }, 108}); 109 110
json
1[ 2{ 3 "finished": "false", 4 "name:": "test1" 5}, 6{ 7 "finished": "false", 8 "name:": "test2" 9}, 10{ 11 "finished": "false", 12 "name:": "test3" 13}, 14{ 15 "finished": "false", 16 "name:": "test4" 17} 18] 19
回答1件
あなたの回答
tips
プレビュー