为什么下面的 vue 搜索框无法输入数据?
使用 javascript+vue3+Ant Design Vue 写了下面的代码:
<template>
<top-bar></top-bar>
<div class="container">
<a-page-header
style="border: 1px solid rgb(235, 237, 240)"
title="搜索引擎"
sub-title="搜索引擎健康状态历史记录"
@back="navigateToRoot"
>
<a-row class="content">
<div style="flex: 1">
<img
class="icon theme-icon"
src="../assets/健康.svg"
alt="Search Engine Logo"
/>
<a-typography-title :level="5">
搜索引擎的健康检查机制介绍:
</a-typography-title>
<p>
为了保证搜索引擎的持续可交付性,引入了搜索引擎的健康检查机制。后台会定时运行检查检查脚本,不断刷新健康检查状态。
<a
href="xxx/services/search_engine_health_check_service.py"
target="_blank"
>查看健康检查脚本点击</a
>
</p>
<p>
执行健康检查,会使用一些关键字,调用搜索引擎。通过判断解析到的网页数,来判断搜索要求是否可以正常抓取到数据。
</p>
</div>
</a-row>
</a-page-header>
</div>
<div>
<a-input
v-model:value="trackSourceId"
placeholder="Enter track_source_id"
/>
<a-button type="primary" @click="fetchData">Fetch Data</a-button>
<a-table
v-if="showTable"
:columns="columns"
:dataSource="dataSource"
row-key="id"
:pagination="false"
>
<template #created_at="text">
{{ formatDate(text) }}
</template>
</a-table>
</div>
</template>
<script>
import { reactive } from "vue";
import { Input, Button, Table } from "ant-design-vue";
import axios from "axios";
export default {
components: {
"a-input": Input,
"a-button": Button,
"a-table": Table,
},
setup() {
const trackSourceId = reactive(123);
const dataSource = reactive([]);
const showTable = reactive(false);
const formState = reactive({
meta_uuid: null,
company_id: null,
limit: 100,
len_parse_result_list_gte: null,
});
const columns = [
{
title: "ID",
dataIndex: "id",
key: "id",
},
{
title: "Category",
dataIndex: "category",
key: "category",
},
{
title: "Track Source ID",
dataIndex: "track_source_id",
key: "track_source_id",
},
{
title: "Keyword",
dataIndex: "keyword",
key: "keyword",
},
{
title: "Clip Length",
dataIndex: "clip_len",
key: "clip_len",
},
{
title: "Has Error",
dataIndex: "has_error",
key: "has_error",
slots: { customRender: "has_error" },
},
{
title: "Created At",
dataIndex: "created_at",
key: "created_at",
slots: { customRender: "created_at" },
},
];
const formatDate = (dateString) => {
const options = {
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
};
const date = new Date(dateString);
return date.toLocaleString("en-US", options);
};
const fetchData = async () => {
try {
console.log(trackSourceId);
const response = await axios.get(
"http://xxxx.cn/list_search_engine_health_check_history",
{
params: {
track_source_id: trackSourceId,
},
}
);
dataSource.splice(0, dataSource.length, ...response.data);
showTable.value = true;
} catch (error) {
console.error("Error fetching data:", error);
}
};
return {
trackSourceId,
dataSource,
showTable,
columns,
formatDate,
fetchData,
formState,
};
},
};
</script>
<style>
.gray-placeholder {
color: gray;
}
.container {
margin: 0 auto; /* 居中显示 */
margin-top: 20px;
max-width: 1440px; /* 设置最大宽度为900px */
background-color: #ffffff; /* 浅灰色 */
border-radius: 0.25rem;
}
.container-item {
padding: 25px;
border-width: 0 0 1px;
margin-bottom: 20px;
}
.theme-icon {
width: 64px; /* 设置图标的宽度 */
height: 64px; /* 设置图标的高度 */
}
</style>
无法输入任何数据,这个 123 还是初始化就有的值,无法修改
回复
1个回答
test
2024-07-03
基本数据类型用ref
const trackSourceId = ref(123);
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容