Я создаю Vue JS приложение с Vuetify таблицей данных и Algolia InstantSearch Vue Component .Однако в настоящее время таблица данных и индекс InstantSearch используют разные источники данных.
Как интегрировать результаты поиска по индексу Алголии в таблицу данных Vuetify?
<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();