データベースのデータの表示・検索・追加・削除

Question

以下のように、.vueファイルを作りました。
calendarsというデータベースを読み込み、calendarsFilteredに入れ、そこから検索ワードに応じてデータを表示させるつもりですが、<tr v-for ="calendar in calendarsFiltered" :key="calendar.calendar">としたらcalendarが定義されていませんと表示されます。
どのような問題点がありますでしょうか。

<template> <div> <p v-if="message">{{ message }}</p>

    <div class="container pt-5 my-5 z-depth-1">
    <input class="form-control mr-sm-2" type="text" placeholder="Search" v-model="search_term" aria-label="Search" />
    <button class="btn btn-outline-success my-2 my-sm-0" v-on:click.prevent="getCalendars()">Search</button>
        <table>
            <tr>
                <th></th>
                <th>年月日</th>
                <th>年</th>
                <th>月</th>
                <th>日</th>
                <th>曜日</th>
            </tr>
            <tr v-for ="calendar in calendarsFiltered" :key="calendar.calendar">
                <td><input type="checkbox" name="calendar" v-bind:value="calendar.calendar"></td>
                <td>{{calendar.calendar}}</td>
                <td>{{calendar.year}}</td>
                <td>{{calendar.month}}</td>
                <td>{{calendar.day}}</td>
                <td>{{calendar.week}}</td>
                <router-link :to="{name: 'calendar-edit', params: { calendar: calendar.calendar }}">編集</router-link>
                <button class="btn btn-danger" @click="deleteBook(calendar)">削除</button>
            </tr>

        </table>
    </div>

</div>

</template> <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script> <script> export default { data() { return { calendars: [], isLoading: false, message: "", keyword: "", selection:"" }; }, created: function() { this.getCalendars(); this.findby(); }, computed:{ calendarsFiltered: function(){ return this.findBy(this.calendars,this.keyword,this.selection) } }, methods: { findBy: function(list,value,column){ return list.filter(function(item){ return(calendars[column]==value||value==='') }) }, getCalendars() { axios .get("api/calendar") .then(response => { this.calendars = response.data.calendars; console.log(this.calendars); }) .catch(err => { this.message = err; }); }, deleteBook(calendar) { axios .delete("/api/calendar/" + id) .then(response => { this.getCalendars(); console.log("デリート後"); this.message = ""; }) .catch(error => { this.message = error; }); } }, } </script>

Answer 1

findBy メソッドの中に書いてあるcalendarsがの事ですね。
calendarsじゃなくてitemじゃないですか？