Using the `fetch` function, attempting to assign an argument of type `Ref<string>` to a parameter of type `RequestInfo` will result in an error stating that they are not assignable

Question

Using the `fetch` function, attempting to assign an argument of type `Ref<string>` to a parameter of type `RequestInfo` will result in an error stating that they are not assignable

Attempting to perform a basic fetch operation in Vue using TypeScript:

Encountered compilation issues:

ERROR in src/components/AuthKeysForm.vue:149:33

TS2345: Argument of type 'Ref<string>' is not assignable to parameter of type 'RequestInfo'.
  Type 'Ref<string>' is missing the following properties from type 'Request': cache, credentials, destination, headers, and 17 more.
    147 |       audience,
    148 |       async onSubmit() {
  > 149 |         const res = await fetch(keysUrl);
        |                                 ^^^^^^^
    150 |         const keys = (await res.json())?.keys;
    151 |
    152 |         console.log('submit', type, keysUrl, issuer, audience, keys);

Uncertain about how to correctly specify the types in this scenario.

typescript vue.js fetch

Answer 1

Answer №1

When working with Vue, you can utilize the value property of refs to access the current value easily. In addition, the fetch function, one of its variations, requires a string input (the URL). Therefore, all you need is:

const response = await fetch(urlRef.value);

For more information, refer to: https://vuejs.org/api/reactivity-core.html#ref

Answer 2

When working with Vue, you can utilize the value property of refs to access the current value easily. In addition, the fetch function, one of its variations, requires a string input (the URL). Therefore, all you need is:

const response = await fetch(urlRef.value);

For more information, refer to: https://vuejs.org/api/reactivity-core.html#ref

Using the `fetch` function, attempting to assign an argument of type `Ref<string>` to a parameter of type `RequestInfo` will result in an error stating that they are not assignable

Answer №1

Similar questions

Having trouble resolving 'promise/lib/es6-extensions.js' and 'promise/lib/rejection-tracking' while running 'npm run'

Include a single element repeatedly on a single webpage

What is the most effective way to retrieve the value of a child component in Angular 2 and pass it to the parent component?

Tips for efficiently handling large Excel files in NodeJS without freezing the user interface

What could be causing the Vue transition component to malfunction?

Is there a way to toggle between an Arabic and English CSS file within a Vue3 js project?

Is Typescript compatible with the AWS Amplify Express API?

What is the proper procedure for invoking a delete method to remove all occurrences of a specific index?

My Scope Filter isn't functioning properly; rather than filtering the data, I am just receiving the results of a plain select * from query

The data sent within an event does not trigger reactivity

Steps for correctly retrieving a specific product from my API using Vue3

The ngx-material-timepicker lacks proper design when the minutesGap is set to 1

When the loading of data in vue is delayed, the information may not be accessible to various child components

When utilizing Vue.js, I aim to eliminate a <td></td> element as the colspan data increases

Guide on toggling the button by clicking on the icon to turn it on or off

The error message "jsPDF is not defined in Laravel using Vuejs and bootstrap-table-vue"

Unraveling the mysteries of an undefined entity

Develop a FormGroup through the implementation of a reusable component structure

Production CORS issue (Flask containerized with Docker, static Vue files, NGINX setup)

Exploring Ionic 4 with Angular Router