3

My component vue is like this :

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

There exist error :

invalid expression: :class="{ product == 'responseFound' ? ' btn-default' : ' btn-success' }"

How can I solve it?

2 Answers 2

4

Simply remove the brackets in :class:

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

If you want to add more conditions, wrap it with [] to create an array:

:class="[product == 'responseFound' ? ' btn-default' : ' btn-success', foo ? 'foo' : 'bar']"
Sign up to request clarification or add additional context in comments.

Comments

1

I would use a computed property for this kind of behaviour.

Which removes the logic from your template, and moves it into your script part.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.