Algolia InstantSearch Vue 구성 요소를 Vuetify 데이터 테이블에 통합

Algolia InstantSearch Vue 구성 요소를 Vuetify 데이터 테이블에 통합

Vuetify 데이터 테이블과 Algolia InstantSearch Vue Component가 포함된 Vue JS 애플리케이션을 만들고 있다.그러나 현재 데이터 테이블과 InstantSearch 인덱스는 서로 다른 데이터 소스를 사용하고 있다.

알골리아 지수의 검색 결과를 뷔에티파이 데이터 테이블로 어떻게 통합해야 할까?

 <div id="App">
        <v-app id="inspire" v-cloak>
            <ais-index app-id="{{ config('scout.algolia.id') }}" index-name="{{ (new App\FoodCat)->searchableAs() }}"
               api-key="{{ Algolia\ScoutExtended\Facades\Algolia::searchKey(App\FoodCat::class) }}">

                <section id="widget-grid">
                    <div class="row">
                        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
                            <div class="jarviswidget jarviswidget-sortable" id="wid-id-2" data-widget-editbutton="false" data-widget-deletebutton="false">
                                <header class="ui-sortable-handle">
                                    <div class="widget-header">
                                        <h2><i class="fa fa-list text-orange"></i> Food Categories List</h2>
                                    </div>

                                    <div class="widget-toolbar smart-form">
                                        <label class="input">
                                            <i class="icon-append fa fa-search"></i>
                                            <ais-input placeholder="Search By Keyword"></ais-input>
                                        </label>
                                    </div>

                                    <div class="widget-toolbar smart-form">
                                        <label class="input"> <i class="icon-append fa fa-plus-square-o"></i>
                                            <input v-model="form.inputs.title.val" type="text" class="form-control" :class="{ 'is-invalid': form.errors.title }" name="title" value="" :placeholder="(form.errors.title) ? 'Category Title Required' : 'Add Food Category'" />
                                        </label>
                                    </div>

                                    <button class="btn btn-sm text-white bg-orange widget-hdr-btn" v-html="form.btnText" @click.prevent="(formMode == 'add') ? add() : save()"></button>

                                    <button class="btn btn-sm btn-danger widget-hdr-btn" @click="deleteSelected"><span class="fa fa-trash"></span> Delete Selected</button>
                                </header>

                                <!-- widget div-->
                                <div role="content" class="widget-content no-padding">
                                    <!-- widget content -->
                                    <div class="widget-body">
                                        <ais-results>
                                           <template scope="{ result }">
                                               <div>
                                                   <h1>@{{ result.title }}</h1>
                                                   <h4>@{{ result.slug }}</h4>
                                               </div>
                                           </template>
                                        </ais-results>

                                        <v-progress-linear :indeterminate="true" :height="3" color="#c79121" :active="loadingVal"></v-progress-linear>
                                        <v-data-table v-model="selected" :headers="headers" :items="collection" :pagination.sync="pagination" select-all item-key="id" class="elevation-1" >
                                            <template v-slot:headers="props">
                                                <tr>
                                                    <th><v-checkbox :input-value="props.all" color="#c79121" :indeterminate="props.indeterminate" primary hide-details @click.stop="toggleAllSelected"></v-checkbox></th>
                                                    <th v-for="header in props.headers" :key="header.text"
                                                        :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
                                                        @click="changeSort(header.value)">
                                                        <v-icon small>arrow_upward</v-icon>
                                                        @{{ header.text }}
                                                    </th>
                                                </tr>
                                            </template>

                                            <template v-slot:items="props">
                                                <tr :active="props.selected" @click="props.selected = !props.selected">
                                                    <td class="text-center align-middle">
                                                        <v-checkbox :input-value="props.selected" primary hide-details color="#c79121"></v-checkbox>
                                                    </td>
                                                    <td class="text-center align-middle">@{{ props.item.id }}</td>
                                                    <td>@{{ props.item.title }}</td>
                                                    <td>@{{ props.item.slug }}</td>
                                                    <td class="text-right align-middle">
                                                        <button class="btn btn-primary btn-sm" @click="edit(props.item.id)"><span class="fa fa-edit"></span> Edit Food Category</button>
                                                        <button class="btn btn-danger btn-sm" @click="remove(props.item.id)"><span class="fa fa-trash"></span> Delete Food Category</button>
                                                    </td>
                                                </tr>
                                            </template>
                                            <template slot="no-data">
                                                <p class="text-xs-center">No Data</p>
                                            </template>
                                        </v-data-table>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                </section>
            </ais-index>
        </v-app>
    </div>

---

var app = new Vue({
    el: '#App',
    mixins: [ crudFunctionsMixin ],
    data: () => ({
        model: "food-cat",
        modelName: "Food Category",
        modelNamePlural: "Food Categories",
        form: {
            inputs: {
                id:     { val: '', save: true },
                title:  { val: '', save: true, add: true },
                slug:   { val: '', save: true, add: true },
            },
            btnText: "<i class='fa fa-plus-square-o'></i> Add Food Category",
            errors: false
        },
        formSearch: {
            inputs: {
                keywords:   ''
            }
        },
        headers: [
            { text: 'ID', value: 'id', sortable: true },
            { text: 'Title', value: 'title', sortable: true },
            { text: 'Slug', value: 'slug', sortable: true },
            { sortable: false }
        ],
        pagination: {
            sortBy: 'title'
        },
        collection: []
    }),
    watch: {

    },
    methods: {
        fetch() {
            $.get(`/${this.model}/fetch`, (r) => {
                if(r.successMsg) {
                    this.collection = r.collection;
                }
            });
        }
    }
});
app.fetch();

참조URL: https://stackoverflow.com/questions/55411961/integrating-an-algolia-instantsearch-vue-component-into-a-vuetify-data-table