お世話になってます。
下記のコードに於いて、何故かリストタグのデータが取得
できません!
コードに間違いはない気がしますが!
お分かりの方居られましたら、ご教示下さい!
<!DOCTYPE html> <html> <head> (中略) </head> <body> <div class="container"> <h1>メール送信リスト一覧</h1> <div id="app"> <form v-on:submit.prevent="addItem" class="form-group"> <div class="form-group"> <div class="input-group"> <input type="text" v-model="text" v-on:keyup.enter="changeItems" ref="editor" class="form-control"> <span class="input-group-btn"><button v-on:click="setItems" class="btn btn-primary" type="submit">@{{changeButtonText}}</button></span> </div> </div> </form> <ul id="list" class="list-group"> <li class="list-group-item" v-for="(item, index) in items" v-bind:key="index"> @{{ item }} <span class="pull-right"> <button class="btn btn-xs btn-info" v-on:click="edit(index)"> <span class="glyphicon glyphicon-pencil"></span> </button> <button class="btn btn-xs btn-warning" v-on:click="remove(index)"> <span class="glyphicon glyphicon-trash"></span> </button> </span> </li> </ul> </div> <button type="button" id="data_send" class="btn btn-primary center-block" >送 信</button> <script type="text/javascript"> $(function(){ $('#data_send').click(function(){ alert($('#list li').text()); }); }); </script> <div> <script> var app=new Vue({ el: '#app', data: { text: "", editIndex: -1, items: ["タスク1","タスク2","タスク3"] }, computed: { changeButtonText(){ return this.editIndex === -1 ? "追加" : "編集"; } }, methods: { //追加,削除 setItems() { if(this.editIndex === -1){ this.items.push(this.text); } else { this.items.splice(this.editIndex, 1, this.text); } this.cancel(); }, //キャンセル cancel(){ this.text = ""; this.editIndex = -1; }, //編集 edit(index){ this.editIndex = index; this.text = this.items[index]; this.$refs.editor.focus(); }, //削除 remove(index){ this.items.splice(index, 1); } } }) </script> </body> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/24 02:05
2019/06/24 02:10