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

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

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

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

Pug

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

Q&A

解決済

1回答

10069閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

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

Pug

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

0グッド

2クリップ

投稿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 }")

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

euledge

2018/04/03 03:19

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

2018/04/03 03:24

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

回答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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問