How to have component re-render after its props change in Vue 2?

Question

My component is simple:

<template>
  <btn :color="color" @click="toggleColor">{{btnmsg}}</btn>
</template>

<script>
  import { Btn } from 'chico'
  export default {
    name: 'AButton',
    components: {
      Btn
    },
    data() {
      return {
        btnmsg: 'Legia pany',
        colors: [
          'blue', 'black', 'green', 
          'orange', 'teal', 'cyan', 
          'yellow', 'white'
        ],
        color: 'red'
      }
    },
    methods: {
      toggleColor() {
        this.color = this.colors[Math.floor(Math.random() * Math.floor(this.colors.length))];
      }
    }
  }
</script>

The <Btn> from the ChicoFamily goes something like this:

<template>
  <button :is="tag" :class="[className, {'active': active}]" :type="type" :role="role">
    <slot></slot>
  </button>
</template>

<script>
import classNames from 'classnames';
export default {
  props: {
    tag: {
      type: String,
      default: "button"
    },
    color: {
      type: String,
      default: "default"
    },
    //...it takes a lot of props...
  },
  data() {
    return {
      className: classNames(
        this.floating ? 'btn-floating' : 'btn',
        this.outline ? 'btn-outline-' + this.outline : this.flat ? 'btn-flat' : this.transparent ? '' : 'btn-' + this.color,
        //...classes derived from these props...
      ),
    };
  }
}
</script>

It's a button that, when clicked, should change its color. Clicking it indeed changes the prop passed, but does not re-render the button in the new color.

Why does passing a different prop not re-render the button?

The <Btn> takes its color from Bootstrap classes deriving from the prop. Could it be that the Btn gets the proper prop, but the className mechanic does not catch up?

What is that *chico*'s **Btn** component that you are importing ? — Thomas Ferro, Apr 27 '18 at 10:24
Added some code for it! As you can see, it's a wrapper for a button taking in a lot of props for proper styling — Jakub Strebeyko, Apr 27 '18 at 10:41

score 8 · Answer 1 · answered Feb 13 '22 at 19:53

8

Setting a :key on the component is the best way to force Vue to re-render the component. If you require the component to be re-rendered, simply modify the value of the key, and Vue will re-render it.

answered Feb 13 '22 at 19:53

fotiecodes

460
6
7

score 5 · Accepted Answer · edited Mar 17 '23 at 22:40

This isn't a re-rendering problem– the component is indeed re-rendering when the prop changes. The problem is that the re-render does it no good, because you set the color as an initial value in data, and not as a computed property that gets re-evaluates when data changes.

The way you did it, the className will be set once when the instance will is created, and never again.

In order to make the className re-evaluate each time you change one of the props passed in, you will have to make a computed property out of it, like this:

Btn component:

export default {
  props: {
    [...]
  },
  computed: {
    className() {
      return classNames(
        this.floating ? 'btn-floating' : 'btn',
        this.outline ? 'btn-outline-' + this.outline : this.flat ? 'btn-flat' : this.transparent ? '' : 'btn-' + this.color
      );
    },
  },
}

How to have component re-render after its props change in Vue 2?

2 Answers2