LoginSignup
4
4

More than 3 years have passed since last update.

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

Last updated at Posted at 2017-08-10

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

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

サンプル
https://codepen.io/kwst/pen/yobVpm?editors=1111

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

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

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

仮説: riotのupdateはstateが変わらないと走らない

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

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

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

対応: inputタグの入力値をstateに反映される

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

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

サンプル
https://codepen.io/kwst/pen/NdExzY?editors=1111

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

追記

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

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

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

4
4
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
4
4