Importing methods that return data in Vue/Vuetify 3 and updating tables axios

Currently using Vuetify 3 I'm trying to get this search method "showBills" to return data to the search page, and then update the search page to display the fetched data.

I have already tested these things and they are working:

• API URI string with search results: returns data when used in a browser
• Method: when written directly as part of the search page before being included in another js file that is imported would populate page with data fetched from API, now that it's exported, will populate an alert with JSON data
• Method import: method is properly called and will pop up alert boxes with dummy text and API returned text when called from another js file

My guess is that it has something to do with the way I'm either rendering/handling page updates or the way that I am returning data from the method

Any insight?

This is the search page

<template>
  <v-text-field
    v-model="keywords"
    :loading="loading"
    density="compact"
    clearable
    label="Keyword"
    variant="outlined"
    hint="Keywords are words that might be in the bill"
    prepend-inner-icon="mdi-magnify"
    single-line
    hide-details
    @keydown.enter.prevent="$bills = showBills(keywords)"
  ></v-text-field>
  <v-table>
    <thead>
      <tr>
        <th class="text-left">BILL ID</th>
        <th class="text-left">BILL NUMBER</th>
        <th class="text-left">TITLE</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="bill in bills" v-bind:key="bill.bill_id">
        <td>{{ bill.bill_id }}</td>
        <td>{{ bill.bill_number }}</td>
        <td>{{ bill.title }}</td>
      </tr>
    </tbody>
  </v-table>
</template>
<script>
import { showBills } from '../dir/file.js'
export default {
  name: 'KeywordResults',
  data() {
    return {
      bills: [],
      keywords: []
    }
  },
  methods: {
    showBills
  }
}
</script>

This is the method

import axios from 'axios'
import _ from 'underscore'

export function showBills(keywordString) {
  axios
    .get('api query string', {
      params: {
        key: 'redacted',
        op: 'search',
        state: 'mystate',
        query: keywordString.split().join(',')
      }
    })
    .then((response) => {
      var bills2 = []
      response = response.data.searchresult
      delete response.summary
      _.each(response, function (value) {
        bills2.push(value)
      })
      //In debugging i put alert(bills2) which worked
      //and the alert window showed "[object, object],[object,object],..."
      return bills2
    })
    .catch(() => {
      this.bills2 = []
    })
}

This should work:

The external method:

export const showBills = (keywords) =>
  axios
    .get('api query string', {
      params: {
        key: 'redacted',
        op: 'search',
        state: 'mystate',
        query: keywords.split().join(',')
      }
    })
    .then(
      ({
        data: {
          searchresult: { summary, ...result }
        }
      }) => Object.values(result)
    )
    .catch(() => [])

Usage:

import { showBills } from './path/to/showBills'
export default {
  data: () => ({ bills: [] }),
  methods: {
    async showBills(keywords) {
      this.bills = await showBills(keywords)
    }
  }
}

Or, with the least amount of changes, place a return in front of axios in your current function. Also return [] from catch, instead of assigning to an undefined this.bills2:

export function showBills(keywordString) {
  return axios
    .get('api query string', {
      params: {
        key: 'redacted',
        op: 'search',
        state: 'mystate',
        query: keywordString.split().join(',')
      }
    })
    .then((response) => {
      const result = response.data.searchresult
      delete result.summary
      return Object.values(result)
    })
    .catch(() => [])
}

The usage of showBills remains unchanged (as shown above).

Side note: .split().join(',') doesn't do anything to any text.

Given const s = 'Some text', s.split() returns ['Some text'], which makes the consequent .join(',') useless, as no comma will be added if the input is a an array with a single element. The initial string is sent unchanged to backend.

If it should return ['Some', 'text'], so that the server receives: 'Some,text', you should use s.split(' ').join(',') (or, better yet, s.trim().split(/\s+/).join(','), which treats multiple spaces as a single one and also removes any leading or trailing spaces).

Another problem I see in your component is that you initialise keywords with an empty array and use it in a <v-text-field>'s v-model, which expects a string. It's possible Vuetify sanitises it behind the scenes, so it works, but v-model on a text input should be a string.

Last, but not least, I'd call the method getBills, not showBills, because that's what it does. The template "shows" them, as soon as the method populates this.bills.

Ref: eslint complaining about unused vars in destructuring:

1. Read this
2. Add this to your eslint config:

{
  "rules": {
    "no-unused-vars": ["error", { "ignoreRestSiblings": true }]
  }
}

Alternatively, you could place this above the offending line:

  // eslint-disable-next-line no-unused-vars