I'm currently building a Vue application that showcases a collection of quotes and includes a search feature for filtering through the data. It seems like I might not have properly linked the function to the correct element. I've added a v-model attribute to the input tag, which should bind the user-entered text.
Take a look at my template:
<template>
<div class="container">
<h3>Quotes</h3>
<div class="controllers">
<div class="search">
<input id="search-item" type="text" placeholder="Search for a quote..." v-model="searchText"/>
<button @click="searchResults()" class="search-btn">Search</button>
</div>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">Source</th>
<th scope="col">Context</th>
<th scope="col">Quote</th>
<th scope="col">Theme</th>
</tr>
</thead>
<tbody>
<tr v-for="quote in quotes" v-bind:key="quote.quote">
<th scope="row">{{quote.context}}</th>
<td>{{quote.source}}</td>
<td>{{quote.quote}}</td>
<td>{{quote.theme}}</td>
</tr>
</tbody>
</table>
</div>
</template>
Here's my script:
import axios from 'axios';
export default {
name: 'Quotes',
data() {
return {
searchText: '',
quotes: [
{
quote: null,
context: null,
source: null,
theme: null,
currentPage: 0,
}
],
};
},
mounted() {
axios
.get('https://gist.githubusercontent.com/benchprep/dffc3bffa9704626aa8832a3b4de5b27/raw/quotes.json')
.then(res => {
this.quotes = res.data;
})
},
methods: {
searchResults() {
if (this.searchText.length === 0) {
return '';
}
return this.quotes.filter(quote => quote.quote.match(this.searchText));
},
}
}
Despite no compiler errors, the search functionality doesn't seem to be working as expected when implemented.