vue.js 2でクラスに条件を追加するにはどうすればよいですか？

Question

私のコンポーネントVUEは、このようなものです：

<template> 
    <a href="javascript:" class="btn btn-block" :class="{ product == 'responseFound' ? ' btn-default' : ' btn-success' }" @click="add($event)"> 
     ... 
</template> 

エラーが存在：

無効な式：？：クラス= "{製品== 'のresponseFound' ' BTN-デフォルト'： 'BTN -success'}」

どのように私はそれを解決することができますか？

Answer 1

単に:classにブラケットを取り外し：

<template> 
    <a href="javascript:" class="btn btn-block" :class="product == 'responseFound' ? ' btn-default' : ' btn-success'" @click="add($event)"> 
     ... 
</template> 

あなたはより多くの条件を追加したい場合は、配列を作成する[]とそれを包む：

:class="[product == 'responseFound' ? ' btn-default' : ' btn-success', foo ? 'foo' : 'bar']" 

Answer 2

私はこのために計算されたプロパティを使用します行動の種類。

テンプレートからロジックを削除し、それをスクリプト部分に移動します。

<template> 
    <a href="javascript:" class="btn btn-block" :class="classes" @click="add($event)"> 
</template> 

    <script> 
     export default { 
     computed: { 
       classes() { 
        return this.product == 'responseFound' ? 'btn-default' : 'btn-success'    
       } 
      } 
     } 
    </script>