CODEWITHSUNDEEP
htmlcssvue.jsvuetify.js
Mohamad Handy Nugraha
Mohamad Handy Nugraha

Reputation: 302

Change border-color vuetify v-card when click button

I want to change the border color of the v-card from vuetify with the limited-products id to red when the user clicks the showError button you can see in the image below, and when the user clicks the removeError button, the border color of the v-card with the limited-products id becomes white. In my codepen, What's wrong with my code? enter image description here

Upvotes: 5

Views: 26319

Answers (2)

d-_-b
d-_-b

Reputation: 23211

You can wrap the v-card in v-sheet like this:

<v-sheet outlined color="red" rounded>
    <v-card outlined elevation="0">
        ...
    </v-card>
</v-sheet>

Upvotes: 7

milmal
milmal

Reputation: 551

Looks like you just missing border width.

Edit the border-color to border like so and your code works fine.

<v-card id="limited-products" :style="isShowError ? 'border: 1px solid red;' : 'border: 1px solid white;'">

Upvotes: 7

Related Questions