Tech Racho エンジニアの「?」を「!」に。
  • 開発

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・簡単な導入方法・デバッグ・結果の表示とメモ化

CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。