目前使用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 = []
})
}
应该可以:
外部方法:
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(() => [])
用法:
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:
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(() => [])
}
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在析构中抱怨未使用的变量:
- 读这本
- 将此添加到eslint配置中:
{
"rules": {
"no-unused-vars": ["error", { "ignoreRestSiblings": true }]
}
}
或者，您可以将其放在违规行之上:
// eslint-disable-next-line no-unused-vars