目前使用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>
方法如下
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 = []
})
}
1条答案
按热度按时间nfs0ujit1#
这应该可以工作:
外部方法:
使用方法:
或者,在当前函数中,在
axios
之前放置一个return
,而不是将return []
从catch
分配给未定义的this.bills2
:showBills
的用法保持不变(如上所示)。旁注:
.split().join(',')
不对任何文本做任何事情。给定
const s = 'Some text'
,s.split()
返回['Some text']
,这使得后件.join(',')
无用,因为如果输入是一个具有单个元素的数组,则不会添加逗号。初始字符串未更改地发送到后端。如果它应该返回
['Some', 'text']
,那么服务器接收:'Some,text'
,你应该使用s.split(' ').join(',')
(或者更好的s.trim().split(/\s+/).join(',')
,它将多个空格视为一个空格,并删除任何前导或尾随空格)。我在你的组件中看到的另一个问题是,你用一个空数组初始化
keywords
,并在<v-text-field>
的v-model
中使用它,它需要一个string
。可能Vuetify在幕后清理了它,所以它可以工作,但文本输入上的v-model
应该是string
。最后,但并非最不重要的是,我会调用方法
getBills
,而不是showBills
,因为这就是它的作用。模板 “显示” 它们,只要方法填充this.bills
。Ref:
eslint
抱怨解构中未使用的var:1.读取this
1.将此添加到eslint配置中:
或者,您可以将其放置在违规行上方: