I am currently working on a Vue JS application that allows users to apply filters and search a database. The user can select or type in filters, such as "to" and "from", which are then used in a fetch URL to retrieve data from a json-server. Once the user selects the filters, they can click a button to apply them and retrieve messages from the server.
Below is the relevant code snippet:
<template>
<v-app>
<v-autocomplete dense
filled
label="From: "
v-model="selectedFrom"
:items="msgFromID"
item-text='MsgFrom'
item-value='MsgFrom'>
</v-autocomplete>
<v-autocomplete dense
filled
label="To: "
v-model="selectedTo"
:items="msgToID"
item-text='MsgTo'
item-value='MsgTo'>
</v-autocomplete>
<v-btn @click="fetchData()">Apply Filters</v-btn>
</v-app>
</template>
<script>
export default {
name: 'Inbox',
data() {
return {
msgFromID: [],
msgToID: []
}
},
mounted() {
fetch('SAMPLEURL/messages?MsgFrom=')
.then(res => res.json())
.then(data => this.msgFromID = data)
.catch(err => console.log(err.message)),
fetch('SAMPLEURL/messages?MsgTo=')
.then(res => res.json())
.then(data => this.msgToID = data)
.catch(err => console.log(err.message)),
},
methods: {
fetchData(selectedTo, selectedFrom) {
fetch('SAMPLEURL/messages?MsgFrom=' + selectedFrom + '&MsgTo=' + selectedTo)
.then(
function (response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
}
However, whenever I click the "Apply Filters" button, the values don't get saved and I end up with an undefined URL in the log:
SAMPLEURL/messages?MsgFrom=undefined&MsgTo=undefined
I need help resolving this issue so that the selected values do not show up as undefined. Additionally, I would like to know if it's possible to ignore one of the search criteria (MsgFrom or MsgTo) if no value is selected by the user?