teratail
回答率
85.47%
質問するログイン新規登録
トップVue.jsに関する質問vue.jsで複数要素のアコーディオンを実装したい

編集履歴

回答編集履歴

1

回答の追記

2018/08/20 01:00

投稿

wanabeeee
wanabeeee

スコア19

test CHANGED
@@ -17,3 +17,263 @@
17
17
  参考
18
18
 
19
19
  [#配列から特定の値を検索して、それの値を変えたい](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)
20
+
21
+
22
+
23
+ ### 追記#2018.08.20
24
+
25
+ ```HTML
26
+
27
+
28
+
29
+ <!DOCTYPE html>
30
+
31
+ <html lang="ja">
32
+
33
+
34
+
35
+ <head>
36
+
37
+ <meta charset="UTF-8">
38
+
39
+ <title>議事録帳</title>
40
+
41
+ <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
42
+
43
+ </head>
44
+
45
+
46
+
47
+ <body>
48
+
49
+ <div id="app">
50
+
51
+ <header class="l-header">
52
+
53
+ <div class="l-container">
54
+
55
+ <h1>議事録帳
56
+
57
+ <span class="info">({{remaining.length / todos.length}})</span>
58
+
59
+ </h1>
60
+
61
+ </div>
62
+
63
+ </header>
64
+
65
+ <div class="l-container">
66
+
67
+ <ul v-if="todos.length">
68
+
69
+ <li v-for="(todo, index) in todos">
70
+
71
+ <input type="checkbox" v-model="todo.isDone">
72
+
73
+ <span class="textView" v-bind:class="todo.picked" v-bind:class="{done: todo.isDone}">{{ todo.title }}</span>
74
+
75
+ <div class="el-button-group">
76
+
77
+ <button type="button" class="el-button el-button--primary"><i class="el-icon-edit" v-on:click="toggle(index)"></i></button>
78
+
79
+ <button type="button" class="el-button el-button--primary"><i class="el-icon-delete" v-on:click="deleteItem"></i></button>
80
+
81
+ </div>
82
+
83
+ <div v-show="show[index]">
84
+
85
+ <input type="radio" id="p" value="p" v-model="todo.picked">
86
+
87
+ <label for="p">p</label>
88
+
89
+ <input type="radio" id="h1" value="h1" v-model="todo.picked">
90
+
91
+ <label for="h1">h1</label>
92
+
93
+ <input type="radio" id="h2" value="h2" v-model="todo.picked">
94
+
95
+ <label for="h2">h2</label>
96
+
97
+ </div>
98
+
99
+ </li>
100
+
101
+ </ul>
102
+
103
+ <ul v-else>
104
+
105
+ <li>Nothing to do</li>
106
+
107
+ </ul>
108
+
109
+ <form v-on:submit.prevent="addItem">
110
+
111
+ <div class="bottomArea">
112
+
113
+ <el-row>
114
+
115
+ <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>
116
+
117
+ <el-col :span="19">
118
+
119
+ <el-input v-model="newItem" placeholder="Please text" v-model="input"></el-input>
120
+
121
+ </el-col>
122
+
123
+ <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>
124
+
125
+ </el-row>
126
+
127
+ </div>
128
+
129
+ </form>
130
+
131
+ <pre>{{show}}</pre>
132
+
133
+ <pre>{{todos}}</pre>
134
+
135
+ </div>
136
+
137
+ </div>
138
+
139
+ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
140
+
141
+ <script src="https://unpkg.com/element-ui/lib/index.js"></script>
142
+
143
+ <script src="http://unpkg.com/element-ui/lib/umd/locale/ja.js"></script>
144
+
145
+ <script src="js/common.js"></script>
146
+
147
+ </body>
148
+
149
+
150
+
151
+ </html>
152
+
153
+ ```
154
+
155
+
156
+
157
+ ```JavaScript
158
+
159
+ (function () {
160
+
161
+ //'use strict';
162
+
163
+
164
+
165
+
166
+
167
+ ELEMENT.locale(ELEMENT.lang.ja)
168
+
169
+ var vm = new Vue({
170
+
171
+ el: '#app',
172
+
173
+ data: {
174
+
175
+ newItem: '',
176
+
177
+ todos: [],
178
+
179
+ show: [],
180
+
181
+ radio: 'p'
182
+
183
+ },
184
+
185
+ watch: {
186
+
187
+ todos: {
188
+
189
+ handler: function () {
190
+
191
+ localStorage.setItem('todos', JSON.stringify(this.todos))
192
+
193
+ },
194
+
195
+ deep: true
196
+
197
+ }
198
+
199
+ },
200
+
201
+ mounted: function () {
202
+
203
+ this.todos = JSON.parse(localStorage.getItem('todos')) || []
204
+
205
+ },
206
+
207
+ methods: {
208
+
209
+ addItem: function () {
210
+
211
+ var item = {
212
+
213
+ title: this.newItem,
214
+
215
+ isDone: false,
216
+
217
+ picked: 'p'
218
+
219
+ }
220
+
221
+ this.todos.push(item)
222
+
223
+ this.show.push(false)
224
+
225
+ this.newItem = ''
226
+
227
+ },
228
+
229
+ toggle: function (index) {
230
+
231
+ this.show.splice(index, 1, !this.show[index])
232
+
233
+ },
234
+
235
+ deleteItem: function (index) {
236
+
237
+ if (confirm('are you sure?')) {
238
+
239
+ this.todos.splice(index, 1)
240
+
241
+ }
242
+
243
+ },
244
+
245
+ purge: function (index) {
246
+
247
+ if (!confirm('delete finished?')) {
248
+
249
+ return
250
+
251
+ }
252
+
253
+ this.todos = this.remaining
254
+
255
+ }
256
+
257
+ },
258
+
259
+ computed: {
260
+
261
+ remaining: function () {
262
+
263
+ return this.todos.filter(function (todo) {
264
+
265
+ return !todo.isDone
266
+
267
+ })
268
+
269
+ }
270
+
271
+ }
272
+
273
+ })
274
+
275
+
276
+
277
+ })();
278
+
279
+ ```