I'm trying to create a Vue app that renders a number of quotes and allows you to search through the data. I think maybe I'm not binding the function to the right element. I have a v-model attribute on the input tag so that should bind whatever text a user inputs in.
Here's 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: '',
// search: null,
// data: null,
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));
},
}
}
When I try and implement a search the functionality doesn't work. I'm not getting any errors in the compiler.
Your method is wrong it should be:
searchResults() {
if (this.searchText.length == 0 || this.searchText == '') return;
this.quotes = this.quotes.filter(quote => quote.quote.match(this.searchText));
}
You don't need to return this.quotes, you change the array instead. But this will cause to empty the array so instead you should use another variable with the original array.
This is better:
import axios from 'axios';
export default {
data() {
return {
searchText: "",
quotes: [],
data: [],
};
},
mounted() {
this.fetchQuotes();
},
methods: {
fetchQuotes() {
let url = 'https://gist.githubusercontent.com/benchprep/dffc3bffa9704626aa8832a3b4de5b27/raw/quotes.json/';
axios.get(url).then(res => {
this.quotes = res.data;
this.data = res.data;
});
},
searchResults() {
if (this.searchText.length == 0 || this.searchText == '') {
this.quotes = this.data;
}
this.quotes = this.data.filter(quote => quote.quote.includes(this.searchText));
}
}
}
The problem is on the searchResults() function because it is only filtering this.quotes and return this value, but this value is not used, thus the object this.quotes continue with the started values. I'd suggest that you update the this.quotes when call the function searchResults() but remember to save the initial results.
The best way for this is to use a computed variable that return this.quotes filtered when needed. See in https://vuejs.org/v2/guide/computed.html#Computed-Properties