teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

回答の追記

2018/08/20 01:00

投稿

wanabeeee
wanabeeee

スコア19

answer CHANGED
@@ -7,4 +7,134 @@
7
7
  ```
8
8
 
9
9
  参考
10
- [#配列から特定の値を検索して、それの値を変えたい](https://qiita.com/k-okina/items/9ece44e4327946583a00#%E9%85%8D%E5%88%97%E3%81%8B%E3%82%89%E7%89%B9%E5%AE%9A%E3%81%AE%E5%80%A4%E3%82%92%E6%A4%9C%E7%B4%A2%E3%81%97%E3%81%A6%E3%81%9D%E3%82%8C%E3%81%AE%E5%80%A4%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84)
10
+ [#配列から特定の値を検索して、それの値を変えたい](https://qiita.com/k-okina/items/9ece44e4327946583a00#%E9%85%8D%E5%88%97%E3%81%8B%E3%82%89%E7%89%B9%E5%AE%9A%E3%81%AE%E5%80%A4%E3%82%92%E6%A4%9C%E7%B4%A2%E3%81%97%E3%81%A6%E3%81%9D%E3%82%8C%E3%81%AE%E5%80%A4%E3%82%92%E5%A4%89%E3%81%88%E3%81%9F%E3%81%84)
11
+
12
+ ### 追記#2018.08.20
13
+ ```HTML
14
+
15
+ <!DOCTYPE html>
16
+ <html lang="ja">
17
+
18
+ <head>
19
+ <meta charset="UTF-8">
20
+ <title>議事録帳</title>
21
+ <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
22
+ </head>
23
+
24
+ <body>
25
+ <div id="app">
26
+ <header class="l-header">
27
+ <div class="l-container">
28
+ <h1>議事録帳
29
+ <span class="info">({{remaining.length / todos.length}})</span>
30
+ </h1>
31
+ </div>
32
+ </header>
33
+ <div class="l-container">
34
+ <ul v-if="todos.length">
35
+ <li v-for="(todo, index) in todos">
36
+ <input type="checkbox" v-model="todo.isDone">
37
+ <span class="textView" v-bind:class="todo.picked" v-bind:class="{done: todo.isDone}">{{ todo.title }}</span>
38
+ <div class="el-button-group">
39
+ <button type="button" class="el-button el-button--primary"><i class="el-icon-edit" v-on:click="toggle(index)"></i></button>
40
+ <button type="button" class="el-button el-button--primary"><i class="el-icon-delete" v-on:click="deleteItem"></i></button>
41
+ </div>
42
+ <div v-show="show[index]">
43
+ <input type="radio" id="p" value="p" v-model="todo.picked">
44
+ <label for="p">p</label>
45
+ <input type="radio" id="h1" value="h1" v-model="todo.picked">
46
+ <label for="h1">h1</label>
47
+ <input type="radio" id="h2" value="h2" v-model="todo.picked">
48
+ <label for="h2">h2</label>
49
+ </div>
50
+ </li>
51
+ </ul>
52
+ <ul v-else>
53
+ <li>Nothing to do</li>
54
+ </ul>
55
+ <form v-on:submit.prevent="addItem">
56
+ <div class="bottomArea">
57
+ <el-row>
58
+ <el-col :span="2"><button type="button" class="el-button el-button--danger"><i class="el-icon-delete" v-on:click="purge"></i></button></el-col>
59
+ <el-col :span="19">
60
+ <el-input v-model="newItem" placeholder="Please text" v-model="input"></el-input>
61
+ </el-col>
62
+ <el-col :span="2"><button type="submit" class="el-button el-button--primary"><i class="el-icon-edit-outline" v-on:click="purge"></i></button></el-col>
63
+ </el-row>
64
+ </div>
65
+ </form>
66
+ <pre>{{show}}</pre>
67
+ <pre>{{todos}}</pre>
68
+ </div>
69
+ </div>
70
+ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
71
+ <script src="https://unpkg.com/element-ui/lib/index.js"></script>
72
+ <script src="http://unpkg.com/element-ui/lib/umd/locale/ja.js"></script>
73
+ <script src="js/common.js"></script>
74
+ </body>
75
+
76
+ </html>
77
+ ```
78
+
79
+ ```JavaScript
80
+ (function () {
81
+ //'use strict';
82
+
83
+
84
+ ELEMENT.locale(ELEMENT.lang.ja)
85
+ var vm = new Vue({
86
+ el: '#app',
87
+ data: {
88
+ newItem: '',
89
+ todos: [],
90
+ show: [],
91
+ radio: 'p'
92
+ },
93
+ watch: {
94
+ todos: {
95
+ handler: function () {
96
+ localStorage.setItem('todos', JSON.stringify(this.todos))
97
+ },
98
+ deep: true
99
+ }
100
+ },
101
+ mounted: function () {
102
+ this.todos = JSON.parse(localStorage.getItem('todos')) || []
103
+ },
104
+ methods: {
105
+ addItem: function () {
106
+ var item = {
107
+ title: this.newItem,
108
+ isDone: false,
109
+ picked: 'p'
110
+ }
111
+ this.todos.push(item)
112
+ this.show.push(false)
113
+ this.newItem = ''
114
+ },
115
+ toggle: function (index) {
116
+ this.show.splice(index, 1, !this.show[index])
117
+ },
118
+ deleteItem: function (index) {
119
+ if (confirm('are you sure?')) {
120
+ this.todos.splice(index, 1)
121
+ }
122
+ },
123
+ purge: function (index) {
124
+ if (!confirm('delete finished?')) {
125
+ return
126
+ }
127
+ this.todos = this.remaining
128
+ }
129
+ },
130
+ computed: {
131
+ remaining: function () {
132
+ return this.todos.filter(function (todo) {
133
+ return !todo.isDone
134
+ })
135
+ }
136
+ }
137
+ })
138
+
139
+ })();
140
+ ```