Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What are the problem?

posted at

updated at

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

こちらは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内では、下記の方法が紹介されています。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?