vue.js 2의 수업에서 어떻게 조건을 추가할 수 있을까?

vue.js 2의 수업에서 어떻게 조건을 추가할 수 있을까?

내 구성 요소 vue는 다음과 같다.

<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-successful' }"

어떻게 하면 해결할 수 있을까?

브래킷을 간단히 제거하십시오.: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']"

나는 이런 종류의 행동에 대해 계산된 속성을 사용할 것이다.

템플릿에서 논리를 제거하고 스크립트 부분으로 이동시키는 겁니다.

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

참조URL: https://stackoverflow.com/questions/43757008/how-can-i-add-condition-in-class-on-vue-js-2