Vue.jsサンプルコード(12)特定の単語を入力したらボタンを無効にする

12. 特定の単語を入力したらボタンを無効にする

  • Vue.jsバージョン: 2.5.2
  • フィールドに「WIP」という単語が含まれている場合に「Merge」ボタンを無効にします。
  • 「WIP」が他の英単語の一部の場合は無視されます。
  • 「WIP」が日本語などの2バイト文字に接している場合は単語とみなされません。
  • 小文字の「wip」でも「Merge」ボタンは無効になります。

サンプルコード


ポイントはreturn /\bWIP\b/i.test(this.a)の行です。正規表現でiを指定しているので大文字小文字は区別されません。

 const vm = new Vue({
    el: "#app",
    data: {a: "WIP: 親譲りの無鉄砲で小供の時から損ばかりしている"},
    computed: {
      b: function() {
        return /\bWIP\b/i.test(this.a)  👈
      },
    },
  })

aでHTMLのinputクラスのv-model属性を参照しています。

<input class="form-control" v-model="a" />

補足: ES6のメソッド定義の省略形

ECMAScript 2015(ES6)より、上のコードのb: function()部分を以下のようにb()と略記することもできます(Vue.jsに限りません)。ブラウザの互換性にご注意ください。

b() {
  return /\bWIP\b/i.test(this.a) 
},


バックナンバー(Vue.jsサンプルコード)

Vue.jsサンプルコード(01〜03)Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版の半分ほど、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れてそれぞれ一部を翻訳。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 実は最近Go言語が好き。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ