CODEWITHSUNDEEP
javascriptvue.js
MAx Shvedov
MAx Shvedov

Reputation: 355

How to update canvas on "v-if" switching in Vue?

Div with class progress-wrapper drawning on a canvas. How can I change this code to re-draw canwas after each switching of list? Atm it draws just once.

template

<button @click="switcher = !switcher">SWITCH</button>

<transition name="fade">
    <li v-for="elements in myData" v-if="elements.key == getKey()">
        <span>{{elements.title}}</span>
        <div class="progress-wrapper" :data-value="elements.progress/100"></div>
    </li>
</transition>

script

data() {
    return {
        switcher: true,
    }

getKey(){
    if (this.switcher) {
        return 'KEY'
    } else {
        return 'ANOTHER KEY'
    }

style

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave {
  opacity: 0;
}

Upvotes: 0

Views: 628

Answers (1)

Richard-MX
Richard-MX

Reputation: 484

Ok, you can try this. I've put some comments to highlight parts that need some tweaking.

<template>
  <div>
    <button @click="switcher = !switcher">SWITCH</button>

    <transition name="fade">
      <!-- is a good practice keep v-if and v-for in separate elements -->
      <div v-if="elements.key === currentKey">
        <!-- also you need to add key property when using a for loop -->
        <li 
          v-for="elements in myData"
          :key="elements.key"> 
          <span>{{ elements.title }}</span>
          <div 
            :data-value="elements.progress/100" 
            class="progress-wrapper"></div>
        </li>
      </div>
    </transition>
  </div>
</template>


<script>
export default {
  data() {
    return {
      switcher: true
    };
  },
  computed: {
    // this will return the new value of currentKey as soon as the value of switcher changes
    currentKey() {
      return this.switcher ? "KEY" : "ANOTHER KEY";
    }
  },
};
</script>

Here's more info on combining v-for and v-if in the same node: https://v2.vuejs.org/v2/guide/list.html#v-for-with-v-if

Upvotes: 1

Related Questions