Vue.js issue管理にチケット状態を追加する

イメージ

状態は["new", "assigned", "closed"]の三種類とした。

Vue実装

プルダウンはloop生成

var app1 = new Vue({
  el: '#app1',
  data: {
    statusList: ["new", "assigned", "closed"],
    ...略

issueオブジェクトにチケット状態を持つプロパティを追加

  methods:{
    addIssue: function(){
      if( this.newIssue == "" ){
        return;
      }
      var issue = {
        title: this.newIssue,
        comment: this.issueComment,
        showDetail: false,
        currentStatus: "new"  //追加
      }
      ...略

HTML

v-on:click.stop=""は親要素のclickイベントを抑止。

v-model="issue.currentStatus"で各issueオブジェクトのプロパティをリアクティブに。

<select v-model="issue.currentStatus" v-on:click.stop="">
    <option v-for="value in statusList">{{value}}</option>
 </select>

close時に取り消し線をつける

HTML

インラインスタイルからスタイルの値を返すvueメソッドを呼ぶことにした。

引数はissueごとのチケット状態。渡されたstatusがclosedの時は、取り消し線line-throughを返す。

<span v-bind:style="{'text-decoration':getTitleDecoration(issue.currentStatus)}">{{issue.title}}</span>

Vue実装

text-decorationの値を返すgetTitleDecorationメソッドの実装。

methods:{
  getTitleDecoration: function(status){
    if( status == "closed"){
      return "line-through";
    }
    return "none";
  }
  ...略

サンプルコード

GitHub - letitride/Vue-Samples at 376bd13290745606b9352f1f4bd435f48fc4deb9

リンク