質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Q&A

解決済

Vue.jsで、エラー時にテキストボックスの枠線の色を変える

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

1回答

0グッド

0クリップ

7495閲覧

投稿2018/04/02 19:23

前提・実現したいこと

Vue.jsで、エラー時にテキストボックスの枠線の色を変えたいのですが、思うように実装できません。
枠線の色を変えるにはどのように記述すればいいでしょうか。

以下形式で記述。
Vue.js
pug

試したこと

こうすると、テキストボックス自体が表示されなくなり、

pug

1input.form-control#name(type="text", name="name", v-model="name").alert(v-bind:class="{'alert-color': !isSuccess}" v-if="isErr")

下記のようにもやってみましたが、変化がなく、思うように実装できずにいます。

pug

1input.form-control#name(type="text", name="name", v-model="name", v-bind:class="{ 'alert-color': !isSuccess }")

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

euledge

2018/04/03 03:19

pugで展開された後のHTMLのソースも載せて頂けるとpug使用していない人からも回答しやすいです。
euledge

2018/04/03 03:24

あと、枠線の色をかえるためのCSSのソースも載せていただきたいです

回答1

0

ベストアンサー

CSSや vueの実装がどのようにされているのかわかりませんが、サンプル的なものを提示しますので
あなたの実装との違いを比較していただければよいかと思います。
下記の実装では 文字の長さが10文字を超えたときにテキストボックスのボーダーを赤色にするものです

html

1<div id="example"> 2 <input type="text" class="form-control" id="name" v-model="name" v-bind:class="{'alert-color': !isSuccess }"> 3</div>

css

1.alert-color { 2 border-color: red; 3}

js

1var vm = new Vue({ 2 el: '#example', 3 data: { 4 name: 'Hello' 5 }, 6 computed: { 7 // 算出 getter 関数 8 isSuccess: function () { 9 return this.name.length <= 10 10 } 11 } 12})

以下に動くものを載せます。

https://jsfiddle.net/euledge/m8t5x6d5/

投稿2018/04/06 12:05

euledge

総合スコア2404

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。