vue.js - 为什么下面的 vue 搜索框无法输入数据？

Question

使用 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 还是初始化就有的值，无法修改

Answer 1

基本数据类型用ref

const trackSourceId = ref(123);