Как обновить холст на & ldquo; v-if & rdquo; переключение в Vue?

Хорошо, вы можете попробовать это. Я добавил несколько комментариев, чтобы выделить части, которые нуждаются в некоторой настройке.

<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>

Вот дополнительная информация о объединении v-for и v-if в том же узле: https: // vuejs. орг / v2 / гид / list.html # v-для-с-V, если