LoginSignup
2
1

More than 3 years have passed since last update.

Riot.jsで真偽値属性(disabledなど)が「__disabled」になる問題(v3.0.0)

Last updated at Posted at 2018-09-02

この内容はv3.0.0の場合の話です。最新版では発生しません。

Riot.jsについて

最近のフロントエンド開発ではReactを使うことが多いですが、私は少数派ですので、「Riot.js」をよく使っています。
検索から来た人は、Riot.jsのことはよく知っているはずなので良いですが、そうでない人はぜひ使ってみてください。

__disabled問題

Riot.jsでは、disabled="{ !data.reference[0] }"のように判定式でdisabledが出来る。と公式ガイドに書いてある。

真偽値属性 (checked, selected など) はテンプレート変数がfalse的であれば無視されます。
<input checked={ null }><input>になります。
http://riotjs.com/ja/guide/#真偽値属性

しかし、いざ使おうとすると、なぜか「__disabled」になってしまい、全然機能してくれなかった。
どこで「__disabled」になっているかというと、コンパイル時に変換されているのだが、それでも普通はDOM評価時には「disabled」になるはずが、DOM評価されても、「__disabled」となっていた。

解決策

仕方がないのでdomReady後に無理やり「__disabled」を自前で置き換えて回避してましたが、別件でnpmモジュールを更新していたら、この問題が解決。
riotjs-loaderを3.0.0から4.0.0にしたら、ちゃんと「disabled」になりました。
単純な解決方法だけど、調べた限り全然情報がなかったので、同じようにハマっている人の救いになればと思います。
(まだv3.0.0を使っている人がいればだけど…)

余談

これは私だけかもしれませんが、riotjs-loaderを4.0.0にしたら、webpack.config.jsの書き換えが必要でした。
type: 'babel' -> type: 'none' に変更。

webpack.config.js
  {
    enforce: "pre",
    test: /\.tag$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'riotjs-loader',
        options: {
          type: 'none'
        }
      }
    ],
  }
2
1
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
2
1