Vue.js 簡単なissue管理アプリを作成する

アプリイメージ

入力を行うと

下のエリアにissueが表示

issueタイトルを押下するとコメントが表示される。

複数のissueを登録できる。

削除とステータスの更新は今回では作成しない。

HTMLの記述

入力フォーム部分

今までの復習。各入力部品に対応する値をv-modelでバインディング及び、v-on:clickでイベント送信。

<div id="app1" class="frame">
  <div id="title-form-area">
  <input type="text" v-model.trim="newIssue" id="issue-title" placeholder="Title">
  </div>
  <div id="comment-form-area">
    <textarea v-model.trim="issueComment" placeholder="Comment"></textarea>
  </div>
  <div id="submit-button-area">
  <button v-on:click="addIssue">Submit new issue</button>
  </div>
  ...

issueのリスト表示部分

今までの復習。送信されたissueはv-for loopで出力する。

liごとにv-on:clickを配置し、commentの表示 true / falseのイベントを送信する。

showDetail==trueの時はv-show="issue.showDetail"でcommentの表示を行えばよい。style属性は改行の表示を行うもの。

  ...
  <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>
    </li>
    </ul>
  </div>
</div>

Vueの処理を記述

リアクティブするパラメータは以下の3つ

• newIssue : タイトル入力
• issueComment : issueコメント欄
• issueList : issueの一覧表示用。中にはオブジェクトが入る。

var app1 = new Vue({
  el: '#app1',
  data: {
    newIssue: "",
    issueComment: "",
    issueList: []
  },
  ...

addIssueメソッドの実装。

issueListにpushするオブジェクトは、以下の状態を持つ。

var issue = {
  title: this.newIssue,  //タイトル
  comment: this.issueComment, //コメント
  showDetail: false //コメント表示on / off
}

var app1 = new Vue({
  el: '#app1',
  data: {
    newIssue: "",
    issueComment: "",
    issueList: []
  },
  methods:{
    addIssue: function(){
      if( this.newIssue == "" ){
        return;
      }
      var issue = {
        title: this.newIssue,
        comment: this.issueComment,
        showDetail: false
      }
      //配列先頭に追加
      this.issueList.unshift( issue );
      //入力欄の値をリセット
      this.newIssue = "";
      this.issueComment = "";
    }
  }
});

スタイルはgithubのコード上に。

Vue-Samples/issue.html at db183b6d8a420a2b071c6dd84cabbf58f43d6bd9 · letitride/Vue-Samples · GitHub

リンク