Vue.js issue管理 削除機能を追加した

画面イメージ

HTML

v-showで表示される要素の中に削除ボタンを設置した。

削除ボタンのv-on:click.stopは.stopをつけることによってli要素のv-on:clickのメソッド呼び出しを抑制できる。これをつけないと親要素のv-on:clickも発火しておかしな挙動になる。

deleteIssueメソッドにどのissueのボタンが押されたか？ここではloopのkeyを引数で与えれば、Vue側でどのオブジェクトを削除すればよいか配列の位置がわかる。

<div id="app1" class="frame">
  ...略

 <div id="issue-box">
    <ul>
      <li v-for="issue, key in issueList" v-on:click="issue.showDetail = !issue.showDetail">
      <span>{{issue.title}}</span>
      <div v-show="issue.showDetail" style="white-space:pre-wrap; word-wrap:break-word;">{{issue.comment}}
        <div id="del-button-area"><button v-on:click.stop="deleteIssue(key)" class="del-butoon">Delete</div>
      </div>
    </li>
    </ul>
  </div>
</div>

Vue側の処理

積まれた配列の指定indexを削除すればよいだけ。

...略
methods:{
  deleteIssue: function(index){
    this.issueList.splice(index, 1);
  }
...略

サンプルコード

Vue-Samples/issue.html at 0f3789161f273b1e3fabd262152029b031f4bbc7 · letitride/Vue-Samples · GitHub

リンク