如何使用打字稿、启用和禁用字段更新 Vue.js 中过滤器输入字段的状态？

Question

我使用了一个带过滤器的表，想更新它的数据。如果 depotb 存在，contractNum 应该是活动的，否则它应该是灰色的。如果在输入字段中删除depotb，contractNum应该变灰。 depot 的状态和 contractNum 应该总是更新，这样表中的条目也会更新。我已经尝试了以下方法，但不幸的是 contractNum 只有在再次删除选定的 depotb 时才会变灰。然后 contractNum 在选择新的仓库时也不会重新激活。 我的思维错误在哪里？我如何更新 contractNum 和仓库始终处于状态。为什么编译器不进入监视功能？

打字稿：

export function useAnFilter() {
  const { setDrawerState, drawerData } = useDrawer();

  const updateSearchParams = (params: SearchParamsContract) => {
    drawerData.value.updateSearchParams({ ...params, offset: 0 });
    if (params.constractNum !== undefined) {
    drawerData.value.updateSearchParams({ constractNum: params.constractNum });
    }
  };

  const drawerValue: Ref<SearchParamsContract> = ref({});

  watch(
    drawerData,
    (newData) => {
      drawerValue.value = newData.searchParams.value || {};
    },
    {
      deep: true,
      immediate: true,
    }
  );

const id: Ref<number | undefined> = ref();
  watch(id, (v?: number) => updateSearchParams({ id: v }));

  const depotb: Ref<number | undefined> = ref();

const vertragsnummer: Ref<string | undefined> = ref();
  watch(contractNum, (v?: string) => {
    if (!depotb.value) {
      contractNum.value = undefined;
      // update the value of contractNum only if the contractNum is set
      updateSearchParams({ contractNum: undefined });
      return;
    }
    updateSearchParams({ contractNum: v });
  });

  const iscontractNumDisabled = ref();
  const closeDrawer = () => setDrawerState({});

watch(
    drawerData,
    (data) => {
      if (!data.searchParams.value.contractNum) {
        id.value = undefined;
    },
    {
      deep: true,
      immediate: true,
    }
  );
  const onDepoBInput = (value?: number) => {
    if (!value) {
      contractNum.value = undefined;
      updateSearchParams({ contractNum: undefined });
    }
    const foldId = isString(value) || isNumber(value) ? `${value}` : undefined;
    updateSearchParams({ contractNum: foldId });
  };

  const onContractNumInput = (
    contractNum: string | undefined,
    depotb: string | number
  ) => {
    if (!contractNum && !depotb) {
      contractNum = undefined;
      updateSearchParams({ contractNum: undefined });
      isContractNum.value = true;
    }
    debounce(() => updateSearchParams({ contractNum }), 500);
  };

return {
depotb,
contractNum,
onContractNumInput,
onDepoBInput,
iscontractNumDisabled,

Vuejs：

<template>
  <DrawerWrapperFilter
    :searchParamsRef="drawerData.searchParams"
    :staticFilters="staticFilters"
    @closeDrawer="closeDrawer"
    @updateSearchParams="drawerData.updateSearchParams"
  >
    <template #content>
      <div class="px-4 pt-3">

        <ComboboxDepotB
          :key="drawerValue.depotb? `${drawerValue.ddepotb[0]}` : undefined"
          :value="depotb"
          label="DepotBalloon
          :menu-props="{
            bottom: true,
            offsetY: true,
          }"
          clearable
          outlined
          dense
          aktivOnly
          @input="onDepotBInput"
        />
        <VTextField
          :key="drawerValue.constractNum? `${drawerValue.constractNum}` : undefined"
          v-model="constractNum"
          :disabled="isContractNumDisabled"
          autocomplete="no-autofill"
          clearable
          dense
          label="Constact Number"
          outlined
          @input="onContractNumInput"
        />
        
      </div>
    </template>
  </DrawerWrapperFilter>
</template>

<script lang="ts">
imports....

export default defineComponent({
  components: {
    ComboboxDepotB,
  },
  setup() {
    const {
      closeDrawer,
      depotb,
      drawerData,
      isContractNumDisabled,
      onSaveSelection,
      onContractNumInput,
      constractNum,
      onDepotBInput,
      drawerValue,
      updateSearchParams,
    } = useAnFilter();

    return {
      closeDrawer,
      depotb,
      drawerData,
      isContractNumDisabled,
      onSaveSelection,
      onContractNumInput,
      constractNum,
      onDepotBInput,
      drawerValue,
      updateSearchParams,
    };
  },
});
</script>