Vuex初学者です。よろしくお願いします。
Vuex+axiosで取得した本の一覧にフィルターをかけたいです。(リアルタイム検索)
vue-cli3を使用しています。
〜現状〜
・表示させるのはidとname
・1つのinputでフリーワード(idでもnameでも)検索させたい
・表示するだけならうまくいく
・vuex+axiosを使ってデータ取得しなければ検索がうまくいく
store.js
export default new Vuex.Store({ state: { books: [], }, actions: { loadBooks ({ commit }) { axios .get(URL_BASE) .then(r => r.data) .then(books => { commit('SET_BOOKS', books) }) } }, mutations: { SET_BOOKS (state, books) { state.books = books } } })
App.vue
<template lang="pug"> .home .search-wrap // 検索 input( type="text" v-model="searchQuery" placeholder="検索" ) .result-wrap // noresultの場合 div(v-show="books.length==0") span 結果はありません // 結果の表示 ul li(v-for="book in books") span {{ book.id }} span {{ book.name }} </div> </template> <script> import { mapState } from 'vuex' export default { name: 'home', components: { Btn }, data () { return { searchQuery: '' } }, // データの表示 mounted () { this.$store.dispatch('loadBooks') }, computed: { ...mapState([ 'books' ]), // 検索フィルター books() { return this.books.filter( book => { return this.searchQuery.toLowerCase() .split(/\s+/) .map( q => book.id.toLowerCase().indexOf(q) > -1 || book.name.toLowerCase().indexOf(q) > -1 ) .every( result => result === true ) }) } } } </script>
このようにすると以下のエラーが出ます。
"RangeError: Maximum call stack size exceeded"
表示した後で検索というのが良くない?
store.jsで最初からフィルターをつける必要がある?
など考えたのですが、よく分からず質問させていただきました。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。