How to use 'ref' in Nuxt.js 3-CodePudding

in Following, What i want is, when i change status code using Radio button to get data according to status like "Active, Draft or Trash" from API. CONST params should update.

but on changing the radio input, params is not getting updated. it always print

api_key=**********&language=en-US&deletedStatus=false&byCity=&byCountry=&page=1&ActiveStatus=true&limit=20

but in vue dev tools, i can see these individual datas are updated except params.

<template>
          <div
           v-for="(status, index) in StatusOptions"
           :key="index"
           
           >
              <RadioButton
               :id="status.value"
               name="status"
               :value="status.value"
               @change="ChangeState(status.value)"
               />
              <label>{{ status.name }}</label>
           </div>
        </template>
            
        <script setup>
            import { ref, reactive } from "vue";
            const { apiUrl } = useRuntimeConfig();
            const router = useRouter();
            const route = useRoute();
            
            const deletedStatus = ref(false);
            const byCity = ref("");
            const byCountry = ref("");
            const page = ref(1);
            const ActiveStatus = ref(true);
            const limit = ref(20);
            
            const StatusOptions = ref([
              { name: "Active", value: "Active" },
              { name: "Draft", value: "Draft" },
              { name: "Trash", value: "Trash" },
            ]);
            
            const ChangeState = (state) => {
              if (state == `Active`) {
                deletedStatus.value = false;
                ActiveStatus.value = true;
              }
              if (state == `Draft`) {
                ActiveStatus.value = false;
              }
              if (state == `Trash`) {
                ActiveStatus.value = false;
                deletedStatus.value = true;
              }
              console.log(params.value)
              FetchTours();
            };
            
            
            const params = ref(
              [
                "api_key=****************",
                "language=en-US",
                `deletedStatus=${deletedStatus.value}`,
                `byCity=${byCity.value}`,
                `byCountry=${byCountry.value}`,
                `page=${page.value}`,
                `ActiveStatus=${ActiveStatus.value}`,
                `limit=${limit.value}`,
              ].join("&")
            );
            
            const FetchTours = async () => {
              const { data } = await useFetch(`${apiUrl}/tours/gettours?${params.value}`, {
                key: "someKey",
                initialCache: false,
              });
              AllTours.value = data.value;
            };
            </script>

CodePudding user response：

I think what you are looking for is a computed value. The refs is oly initiated with the base information. Passing .value to your params variable only assigns the value, not the reference.

The usage of computed will track the dependencies of this variable, and will update accordingly when one of the dependencies changes.

const params = computed(() => [
    "api_key=****************",
    "language=en-US",
    `deletedStatus=${deletedStatus.value}`,
    `byCity=${byCity.value}`,
    `byCountry=${byCountry.value}`,
    `page=${page.value}`,
    `ActiveStatus=${ActiveStatus.value}`,
    `limit=${limit.value}`,
  ].join("&")
);