【Vue】v-if,v-forを分離するために【メモ】

v-if, v-for分離前（VueCLIだとエラーになる）

<span class="project-title">{{project.title}}</span>

<div
  class="project" 
  :key="project.title" 
  v-for="project in projects" 
  v-if="currentFilter === project.category || currentFilter === 'ALL'" :key="project.title" v-for="project in projects"
>

↓

v-if, v-for分離後（v-ifを削除し、computedを追記）

v-for部分に「activeProjects」を新規で追加

<span class="project-title">{{project.title}}</span>

<div
  class="project" 
  :key="project.title" 
  v-for="project in activeProjects" 
>

computed: {
    activeProjects() {
      return this.projects.filter(project => {
        return this.currentFilter === project.category || this.currentFilter === 'ALL'
      })
    }
  }