Categories
Development Vue

Cleanest way to re-render component in Vue

I have a Keyboard.vue component containing many Key.vue child component instances (one for each key).

In Key.vue, the key is actually a html <button> element that can get disabled.

By clicking a certain button in my app, I want to reset keyboard and make all keys enabled again. I thought that setting a v-if to false then to true again (<keyboard v-if="BooleanValue" />) would re-render Keyboard.vue and all its Key.vue child component instances.

It doesn’t. Why not?

App.vue

<template>
  <div class="app">
    ...
    <keyboard v-if="!gameIsOver && showKeyboard" />
    ...
  </div>
</template>

<script>
export default {
  components: {
    Keyboard
  },
  computed: {
    gameIsOver () {
      return this.$store.state.gameIsOver
    },
    showKeyboard () {
      return this.$store.state.showKeyboard
    }
  }

Keyboard.vue

<template>
  <section>
    <key class="letter" v-for="(letter) in letters" :key="letter" :letter="letter" />
  </section>
</template>

Key.vue

<template>
  <button :disabled="disabled" @click="checkLetter(letter)">
    
  </button>
</template>

<script>
export default {
  ...
  data () {
    return {
      disabled: false
    }
  }

My button resetting keyboard triggers:

this.$store.commit('SET_KEYBOARD_VISIBILITY', false)
this.$store.commit('SET_KEYBOARD_VISIBILITY', true)

Leave a Reply

Your email address will not be published. Required fields are marked *