在 Vue/Vuetify 3 中导入返回数据的方法并更新表 axios

Question

目前正在使用 Vuetify 3 我试图让这个搜索方法“showBills”将数据返回到搜索页面，然后更新搜索页面以显示获取的数据。

我已经测试了这些东西并且它们正在工作：

• 带有搜索结果的 API URI 字符串：在浏览器中使用时返回数据
• 方法：在包含在导入的另一个 js 文件中之前直接作为搜索页面的一部分编写时，将使用从 API 获取的数据填充页面，现在它已导出，将使用 JSON 数据填充警报
• 方法导入：方法被正确调用，当从另一个js文件调用时，将弹出带有虚拟文本和API返回文本的警告框

我的猜测是它与我呈现/处理页面更新的方式或我从方法返回数据的方式有关

任何见解？

这是搜索页面

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

            keywords: [],
        };
    },
    methods: {
        showBills,
    },
};
</script>

这就是方法

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 = [];
        });
}

Answer 1

这应该有效：

外部方法：

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

用法：

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

---

或者，通过最少的更改，在当前函数中的

return

前面放置一个

axios

。还有

return []

来自

catch

，而不是分配给未定义的

this.bills2

.

并使用我上面显示的方法。