解決したいこと
練習で議事録アプリを作ろうと思うのですが、
<i class="el-icon-edit" v-on:click="toggle"></i>をクリックすると
各リストの<div v-show="show">が一斉に開閉してしまします。
複数要素で実装出来ますでしょうか。
ご存知の方いらっしゃいましたらご教示頂けると幸いです。
よろしくお願い致します。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>議事録帳</title> 6 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 7 <link rel="stylesheet" href="css/style.css"> 8</head> 9<body> 10 <div id="app"> 11 <header class="l-header"> 12 <div class="l-container"> 13 <h1>議事録帳 14 <span class="info">({{remaining.length / todos.length}})</span> 15 </h1> 16 </div> 17 </header> 18 <div class="l-container"> 19 <ul v-if="todos.length"> 20 <li v-for="(todo, index) in todos"> 21 <input type="checkbox" v-model="todo.isDone"> 22 <span class="textView" v-bind:class="todo.picked" v-bind:class="{done: todo.isDone}">{{ todo.title }}</span> 23 <div class="el-button-group"> 24 <button type="button" class="el-button el-button--primary"><i class="el-icon-edit" v-on:click="toggle"></i></button> 25 <button type="button" class="el-button el-button--primary"><i class="el-icon-delete" v-on:click="deleteItem"></i></button> 26 </div> 27 <div v-show="show"> 28 <input type="radio" id="p" value="p" v-model="todo.picked"> 29 <label for="p">p</label> 30 <input type="radio" id="h1" value="h1" v-model="todo.picked"> 31 <label for="h1">h1</label> 32 <input type="radio" id="h2" value="h2" v-model="todo.picked"> 33 <label for="h2">h2</label> 34 </div> 35 </li> 36 </ul> 37 <ul v-else> 38 <li>Nothing to do</li> 39 </ul> 40 <form v-on:submit.prevent="addItem"> 41 <div class="bottomArea"> 42 <el-row> 43 <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> 44 <el-col :span="19"><el-input v-model="newItem" placeholder="Please text" v-model="input"></el-input></el-col> 45 <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> 46 </el-row> 47 </div> 48 </form> 49 </div> 50 </div> 51 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 52 <script src="https://unpkg.com/element-ui/lib/index.js"></script> 53 <script src="http://unpkg.com/element-ui/lib/umd/locale/ja.js"></script> 54 <script src="js/common.js"></script> 55</body> 56</html>
javascript
1(function(){ 2 //'use strict'; 3 4 5 ELEMENT.locale(ELEMENT.lang.ja) 6 var vm = new Vue({ 7 el: '#app', 8 data: { 9 newItem: '', 10 todos: [], 11 show: false, 12 radio: 'p' 13 }, 14 watch: { 15 todos: { 16 handler: function() { 17 localStorage.setItem('todos', JSON.stringify(this.todos)) 18 }, 19 deep: true 20 } 21 }, 22 mounted: function() { 23 this.todos = JSON.parse(localStorage.getItem('todos')) || [] 24 }, 25 methods: { 26 addItem: function() { 27 var item = { 28 title: this.newItem, 29 isDone: false, 30 picked: 'p' 31 } 32 this.todos.push(item) 33 this.newItem = '' 34 }, 35 toggle: function() { 36 this.show = !this.show 37 }, 38 deleteItem: function(index){ 39 if(confirm('are you sure?')) { 40 this.todos.splice(index, 1) 41 } 42 }, 43 purge: function(index){ 44 if(!confirm('delete finished?')) { 45 return 46 } 47 this.todos = this.remaining 48 } 49 }, 50 computed: { 51 remaining: function() { 52 return this.todos.filter(function(todo){ 53 return !todo.isDone 54 }) 55 } 56 } 57 }) 58 59})();
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/17 14:55
2018/08/20 01:03
2018/08/20 01:56