riotのinputタグでupdateが走らない場合がある

Last updated at 2021-01-07Posted at 2017-08-10

こちらはRiot.js Advent Calendar 2017の4日目の記事になります。業務でriotを使う中でハマった細かすぎて伝わらないtipsです。

2秒ごとにupdateが走るはずが、更新されない

サンプルでは2秒ごとにタグのupdateを走らせていてその度にstrを更新しています。

this.update({ str: "abc" });

ですが、inputタグのvalueは上書かれずに入力した値がそのまま残ります。

試しにサンプルのsetInterval内を下記のように変更して、一度別の文字列を入れてから"abc"を挿入するようにしたらちゃんとupdateが走りました。

this.update({ str: "" });
this.update({ str: "abc" });

内部的にstateの変更がなければupdateをスキップする処理が入っている気がします。

inputタグのinputイベントでstateをupdateしてやるようにしたら、ちゃんとupdateが走りました。

this.onInput = (e) => {
  this.update({ str: e.target.value });
}

本当は強制的にupdateを走らせるような機能があればそれを使いたいものです。

この現象について議論されているissueを見つけました。
https://github.com/riot/riot/issues/2112

このissueによるとこの現象はバグではなく仕様とのことです。
Vue.jsでも同じような挙動らしいです。
上記issue内では、下記の方法が紹介されています。

ベストワークアラウンドがあれば知りたいです。