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

個人開発したアプリの宣伝
目的地が設定できる手帳のような使い心地のTODOアプリを公開しています。
Todo with Location

Todo with Location

  • Yoshiko Ichikawa
  • Productivity
  • Free

アプリイメージ

入力を行うと

f:id:letitride:20190730165600p:plain:w400

下のエリアにissueが表示

f:id:letitride:20190730165627p:plain:w400

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

f:id:letitride:20190730165714p:plain:w400

複数のissueを登録できる。

f:id:letitride:20190730165746p:plain:w400

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

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