Skip to content

Instantly share code, notes, and snippets.

@yucongo

yucongo/index.html

Created October 29, 2021 01:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yucongo/cdefc26642c63c9bc787075a7c1f58f3 to your computer and use it in GitHub Desktop.
Save yucongo/cdefc26642c63c9bc787075a7c1f58f3 to your computer and use it in GitHub Desktop.
Download ZIP
Vue InstantSearch | display results in table
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Vue InstantSearch | display results in table</title>
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="styles.css" media="all" rel="stylesheet" />
<!-- Scripts -->
<script src="https://unpkg.com/vue@2.3/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-instantsearch@0.2/dist/vue-instantsearch.js"></script>
</head>
<body>
<div id="app">
<ais-index app-id="latency" api-key="6be0576ff61c053d5f9a3225e2a90f76" index-name="ikea">
<ais-search-box placeholder="Search for a product..."></ais-search-box>
<ais-results inline-template>
<table>
<tbody>
<tr v-for="result in results" :key="result.objectID">
<td>{{ result.name }}</td>
<td>{{ result.description }}</td>
</tr>
</tbody>
</table>
</ais-results>
<ais-pagination v-bind:class-names="{'ais-pagination': 'pagination'}"></ais-pagination>
</ais-index>
</div>
<script>
new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>
Raw
vue-instantsearch-display-results-in-table.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment