I am looking to integrate a search feature on my website using Vue 2, where the search functionality will be applied to components generated from a JSON file upon page load.
The JSON file contains the keywords I want to utilize for the search - specifically, the 'Name' and 'Tag' properties. (Just to clarify, the components are referred to as pools.) While considering using a computed property for this purpose, I am a bit unsure about how to proceed.
Here's what I have so far for the search bar component:
<template>
<div class="search">
<input type="text" v-model="search" placeholder="Search for pools">
</div>
</template>
<script>
export default {
mounted() {
console.log('Search Box Mounted')
},
data(){
return{
search:''
}
},
computed: {
filteredPools: function(){
}
}
}
</script>
This code snippet is responsible for displaying the list of pools:
<template>
<div class="container pool" v-bind:id="'poolalgo-' + algo">
<h2 class="type text-center">{{algo}}</h2>
<hr class="poolruler" />
<div class="row">
<pool v-for="pool in pools" :pool="pool" :key="pool.tag">
</pool>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('PoolList mounted.')
},
props:['pools','algo']
}
</script>
And here's the component that displays the individual pool details:
<template>
<div class="col-xl-3 centered icon">
<a v-bind:href="pool.url" target="_blank">
<img class="logo img rounded-circle" v-bind:src="pool.image" height="120px" width="120px">
</a>
<h4>{{pool.name}}</h4>
<p>Symbol/Tag: {{pool.tag}}</p>
<p>Block Time: {{pool.blocktime}}</p>
//ect
<br>
</div>
</template>
<script>
export default {
props: ['pool'],
mounted() {
console.log('Pool mounted.')
},
}
</script>
Lastly, this is how the pool list is rendered on the main page:
<pool-list v-for="(pools,algo) in poolConfig" :pools="pools" :algo="algo"></pool-list>