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

Question

前提・実現したいこと

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

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

試したこと

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

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

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

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

Comments

[euledge]

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

[euledge]

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

Answer 1

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

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

.alert-color {
  border-color: red;
}

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Hello'
  },
  computed: {
    // 算出 getter 関数
    isSuccess: function () {
      return this.name.length <= 10
    }
  }
})

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

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