CODEWITHSUNDEEP
javascriptvue.jsvue-componentvuetify.jsjson-server
nobodyAskedYouPatrice
nobodyAskedYouPatrice

Reputation: 131

How to select filters and use the selected value to search in vue application?

I have a Vue JS application where a user selects or types-in filters and searches a database based on those filters. Currently I have a "to" and a "from" section where the values are used in a fetch url to get the data from a json-server. Once a user selects the "to" and/or "from", they can click a button that will apply the filters and gets the messages from the json-server.

Here is the relevant code:

    <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;
                        }
       }

Whenever I click the button to "APPLY FILTERS", the values that were selected don't get saved and I end up with this url in the log:

    SAMPLEURL/messages?MsgFrom=undefined&MsgTo=undefined

How can I make the values stop showing up as undefined and instead retrieve a list of the messages that I can then display on the page? In addition, is it possible to completely ignore one of the search criteria (MsgFrom or MsgTo) if there is not value selected by the user?

Upvotes: 0

Views: 992

Answers (1)

tony19
tony19

Reputation: 138536

Your click-binding passes no parameters:

<v-btn @click="fetchData()">

but the method expects them:

export default {
  methods: {
    fetchData(selectedTo, selectedFrom) {/*...*/}
  }
}

Since no arguments were passed to the method, the values of selectedTo and selectedFrom are undefined, leading to the error you observed.

Solution

You can either update the binding to pass the required parameters:

<v-btn @click="fetchData(selectedTo, selectedFrom)">

Or you could update the method to use the component's data props:

export default {
  methods: {
    fetchData() {
      const { selectedTo, selectedFrom } = this
      fetch('SAMPLEURL/messages?MsgFrom=' + selectedFrom + '&MsgTo=' + selectedTo)
      //...
    }
  }
}

Upvotes: 1

Related Questions