Change color of md-card in vue.js

Question

I want to create a button which will change the color of md-card after click. I'm not certain how I should do this. I have idea that here should be variable which is changing after click from false to true and then some function execution but don't know what should be inside.

<template>
  <div>
    <md-card class="md-primary" md-with-hover >
      <md-ripple>
        <md-card-header>
          <div class="md-title" >color</div>
        </md-card-header>

        <md-card-actions md-alignment="space-between">
          <md-button v-on:click="available = !available">Action</md-button>
        </md-card-actions>
      </md-ripple>
    </md-card>
  </div>
</template>


<script>
  export default {
    name: 'FirstRouteChild',
    data: {
        available: true,
        },
    computed: {
    }
  }
</script>


<style lang="scss" scoped>
  @import "../../node_modules/vue-material/src/theme/engine";
  @import "../../node_modules/vue-material/src/base/theme";*/
  @import "../../node_modules/vue-material/src/components/MdCard/theme";

  @include md-register-theme("default", (
    primary: md-get-palette-color(green, A200), // The primary color of your application
    accent: md-get-palette-color(red, A200) // The accent or secondary color
  ));

  .md-card {
    width: 320px;
    margin: 4px;
    display: inline-block;
    vertical-align: top;
  }
</style>

You mean you just want to [change the class](https://vuejs.org/v2/guide/class-and-style.html), right? — PatrickSteele, Feb 19 '18 at 11:44
Yes I was thinking about change class between md-primary and md-accent — Beorn, Feb 19 '18 at 12:15
And did you see the link I posted in my comment? It shows you how to bind the `class` and `style` attributes in Vue. — PatrickSteele, Feb 19 '18 at 12:27
try this i think this help you http://jsfiddle.net/eywraw8t/74724/ — lochawala, Jun 13 '18 at 14:11

score 0 · Answer 1 · edited Jul 15 '22 at 01:32

You can bind a class to a boolean with the following syntax:

v-bind:class="{ availableClassName: available }"

In your example this becomes:

<div>
  <md-card v-bind:class="{ availableClassName: available }" class="md-primary" md-with-hover >
    <md-ripple>
      <md-card-header>
        <div class="md-title" >color</div>
      </md-card-header>
      <md-card-actions md-alignment="space-between">
        <md-button v-on:click="available = !available">Action</md-button>
      </md-card-actions>
    </md-ripple>
  </md-card>
</div>

See the documentation for more details: https://v2.vuejs.org/v2/guide/class-and-style.html

Change color of md-card in vue.js

1 Answers1