LoginSignup
5
3

More than 5 years have passed since last update.

Riot 3.0.0 でclassが更新されないバグの対応

Last updated at Posted at 2016-11-23

※ 2016.11.27 追記
ver3.0.1で修正されたようです。
https://github.com/riot/riot/issues/2082


Riot v2.* で動作していたシンプルなtodoアプリが、v3.0.0 になって動かなくなりました。

下記のコードは、リストの項目をクリックすると完了フラグをセットしてスタイルを更新する定番のtodoアプリです。

todo.tag
<todo>
  <ul>
    <li each={items} onClick={toggle} class={completed: isCompleted}>{name}</li>
  </ul>

  <script>
    this.items = [
      {name: 'task1', isCompleted: false},
      {name: 'task2', isCompleted: false},
    ]

    toggle(e) {
      console.log(e)
      e.preventDefault()
      e.item.isCompleted = !e.item.isCompleted
    }
  </script>

  <style scoped>
    li.completed {
      text-decoration: line-through;
      color: #666;
    }
  </style>
</todo>

class={completed: isCompleted} は、item.isCompletedがtrueの場合にclass="completed"とレンダリングされるRiotのショートカットです。

動作するサンプル (Riot v2.6.7)
http://plnkr.co/OGrcvQXR10FebdR9PjK7

動作しないサンプル (Riot v3.0.0)
http://plnkr.co/zKfpa1hlEQOWfCwB5ILT

itemsオブジェクトは更新されており、isCompletedがtrueなら再レンダリングされるのですが、falseの時は再レンダリングされずclassが更新されません。

既に報告済み

人生初のオープンソースプロジェクトでのissueを立てようかと思ったのですが、既に上がっていました。
https://github.com/riot/riot/issues/2082

issueにもありますが、
class={ isCompleted ? 'completed' : '' }
のような三項演算子を使っても解決できないようです。

解決策

三項演算子のfalse側に空文字以外を入れると正しくレンダリングされるようです(スペースでも可)。
class={ isCompleted ? 'completed' : ' ' }

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3