[nuxt] [rails] filter 메서드를 사용하여 다중 계층 선택 상자를 비동기식으로 구현

Category.seed(:id,
  { id: 100, name: '親1'},
  { id: 110, name: '親1の子1'},
  { id: 111, name: '親1の子1の孫1'}, { id: 112, name: '親1の子1の孫2'}, { id: 113, name: '親1の子1の孫3'},
  { id: 120, name: '親1の子2'},
  { id: 121, name: '親1の子2の孫1'}, { id: 122, name: '親1の子2の孫2'}, { id: 123, name: '親1の子2の孫3'},
  { id: 130, name: '親1の子3'},
  { id: 131, name: '親1の子3の孫1'}, { id: 132, name: '親1の子3の孫2'}, { id: 133, name: '親1の子3の孫3'},

  { id: 200, name: '親2'},
  { id: 210, name: '親2の子1'},
  { id: 211, name: '親2の子1の孫1'}, { id: 212, name: '親2の子1の孫2'}, { id: 213, name: '親2の子1の孫3'},
  { id: 220, name: '親2の子2'},
  { id: 221, name: '親2の子2の孫1'}, { id: 222, name: '親2の子2の孫2'}, { id: 223, name: '親2の子2の孫3'},
  { id: 230, name: '親2の子3'},
  { id: 231, name: '親2の子3の孫1'}, { id: 232, name: '親2の子3の孫2'}, { id: 233, name: '親2の子3の孫3'}
)

Rails.application.routes.draw do
  resources :categories, only: %i[index]
end

class CategoriesController < BaseController
  def index
    @categories = Category.all
  end
end

json.categories @categories do |category|
  json.extract! category, :id, :name
end

nuxt 측 구현

<template>
  <div>
    <v-select
      label="親カテゴリー"
      :items="parentCategory"
      item-text="name"
      item-value="id"
      v-model="parentSelected"
    />

    <v-select
      label="子カテゴリー"
      :items="childCategory"
      item-text="name"
      item-value="id"
      v-model="childrenSelected"
    />

    <v-select
      label="孫カテゴリー"
      :items="grandChildCategory"
      item-text="name"
      item-value="id"
      v-model="grandChildrenSelected"
    />
  </div>
</template>

<script>
export default {
  mounted() {
    this.fetchCategory()
  },

  data: () => {
    return {
      categories: [],
      parentSelected: '',
      childrenSelected: '',
      grandChildrenSelected: '',
    }
  },

  computed: {
    parentCategory() {
      return this.categories.filter((category) => category.id % 100 === 0)
    },

    childCategory() {
      if (this.parentSelected === '') {
        return []
      }

      return this.categories.filter((category) => {
                // 100の位が同じcategory
        return (Math.floor(category.id  / 100) === Math.floor(this.parentSelected / 100) &&
                // 1の位が0のcategory
                category.id % 10 === 0 &&
                // 親カテゴリーと一致しないcategory
                category.id !== this.parentSelected)
        })
    },

    grandChildCategory() {
      if (this.childrenSelected === '') {
        return []
      }

      return this.categories.filter((category) => {
                // 10の位が一致するcategory
        return (Math.floor(category.id  / 10) === Math.floor(this.childrenSelected / 10) &&
                // 1の位が0ではないのcategory
                category.id % 10 !== 0)
      })
    }
  },

  methods: {
    fetchCategory() {
      const url = 'api/categories'
      this.$axios
        .$get(url)
        .then((response) => {
          this.categories = response.categories
        })
        .catch((errors) => {
          console.log(errors)
        })
    }
  }
}
</script>