The call does not match any overloads in Vue when using TypeScript

What is the reason behind the occurrence of the error in the ID part of the query?

This call does not have a matching overload.

<template>
  <swiper-slide
    slot="list"
    v-for="(list, index) in list.banner"
    :key="index"
    ><img :src="list.image_url" @click="noticeRead(list.id)"
  /></swiper-slide>
</template>
export default class Main extends Vue {
noticeRead(id: number): void {
  if (id != null) {
    this.$router.push({
      path: "/help/notice/read",
      query: {
        id: id ,
      },
        });
      }
    }
}

Answer №1

When you omit that final , in your $router.push() arguments, the TypeScript code is altered as follows:

export default class Main extends Vue {
  noticeRead(id: number): void {
    if (id != null) {
      this.$router.push({
        path: "/help/notice/read",
        query: {
          id: id
        }
      }) // Missing a comma here can lead to syntax errors
    }
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ReactJS Tutorial: Simple Guide to Updating Array State Data

const [rowData, setRowData] = useState([]); const old = {id: 'stud1', name: 'jake', room: '2'}; const newData = {name: 'jake', room: '3A'}; useEffect(() => { let ignore = false; ...

What is causing the failure of vue unit tests due to VIcon?

I'm currently writing unit tests for Vuetify components, and while most of them are functioning properly, some components like checkboxes and autocomplete are failing to mount. The error message I am receiving is: Cannot read properties of undefined ( ...

Create a package themed with Material UI for export

I am attempting to create a new npm package that exports all @material-ui/core components with my own theme. I am currently using TypeScript and Rollup, but encountering difficulties. Here is the code I have: index.ts export { Button } from '@materia ...

Getting started with Angular 2 using NPM version 3.10.6 and Angular CLI 1.0.0

I am having trouble when I run 'NPM start,' all I get is https://i.sstatic.net/QCViF.png Below are the files in my project: package.json { "name": "angular2-quickstart", "version": "1.0.0", // rest of the package.json file continues... } ...

Exploring the use of Jest for testing delete actions with Redux

I've been working on testing my React + Redux application, specifically trying to figure out how to test my reducer that removes an object from the global state with a click. Here's the code for my reducer: const PeopleReducer = (state:any = init ...

Array containing multiple service providers in Angular

I encountered a problem while utilizing multiple providers in my application: ERROR Error: No provider for Array! at injectionError (VM634 core.umd.js:1238) [angular] at noProviderError (VM634 core.umd.js:1276) [angular] at ReflectiveInjector_._throwOrNul ...

Using the --prod flag in Ionic 3 app on Android 7 results in the Keyboard not being displayed

After running the command ionic cordova run android --device, everything functions properly. However, when attempting the same command with the --prod flag, the input click fails to display the keyboard despite implementing the (onFocus) attribute in the & ...

Error messages encountered following the latest update to the subsequent project

Recently, I upgraded a Next project from version 12 to 14, and now I'm encountering numerous import errors when attempting to run the project locally. There are too many errors to list completely, but here are a few examples: Import trace for requeste ...

Dealing with mouseover and mouseout events for ul li elements in Angular 9: An easy guide

Having trouble showing and hiding the span tag using mouseover and mouseout events. The ul and li elements are generating dynamically, so I attempted to toggle the display between block and none but it is not working as expected. Does anyone have a solutio ...

Verify if a particular string is present within an array

I am in possession of the key StudentMembers[1].active, and now I must verify if this particular key exists within the following array const array= ["StudentMembers.Active", "StudentMembers.InActive"] What is the method to eliminate the index [1] from Stu ...

Using a button click to toggle the vue-ctk-date-time-picker in VueJS

Currently, I am utilizing the Vue component - https://github.com/chronotruck/vue-ctk-date-time-picker within my own component. However, I am encountering an issue where I would like to maintain the component's original functionality while having a but ...

@ngrx effects ensure switchmap does not stop on error

Throughout the sign up process, I make 3 http calls: signing up with an auth provider, creating an account within the API, and then logging in. If the signup with the auth provider fails (e.g. due to an existing account), the process still tries to create ...

Determining special characters within a string using VueJS

As a newcomer to VueJS, I am currently developing an application that requires a signup and login system. My goal is to inform the user if they have entered a special character such as /[&^$*_+~.()\'\"!\-:@]/. In order to achieve th ...

Using TypeScript to deserialize JSON into a Discriminated Union

Consider the following Typescript code snippet: class Excel { Password: string; Sheet: number; } class Csv { Separator: string; Encoding: string; } type FileType = Excel | Csv let input = '{"Separator": ",", "Encoding": "UTF-8"}&ap ...

How can Vue.Draggable's draggable functionality be toggled on and off?

I'm faced with a situation where the elements being wrapped should only be draggable under specific conditions. I managed to handle it in my HTML code like this: <draggable v-if='somePassingConditions'> <my-component></my-comp ...

Mapping over an array and ignoring any undefined properties in a dynamic object

Looking for a way to dynamically create objects in the 'map' function to reduce the final array size. The goal is to avoid adding properties with undefined values. For example, if 'offst: undefined', skip this property but add others wi ...

Using the typeof operator to test a Typescript array being passed as an object

I have a puzzling query about this particular code snippet. It goes like this: export function parseSomething(someList: string[]): string[] { someList.forEach((someField: string) => { console.log(typeof someField) }) Despite passing a s ...

Can Vue 3 be utilized with both the composition API and vue class components?

For the past 8 months, our project has been developed using Vue 3 and the class components. However, it appears that the class components are no longer being maintained. Therefore, we have decided to gradually transition to the composition API, specificall ...

Ways to input a return value that may be an array depending on the input

I'm struggling to properly type the return value in TypeScript to clear an error. function simplifiedFn( ids: string | string[], ): typeof ids extends string[] ? number[] : number { const idsIsArray = Array.isArray(ids); const idsProvided = idsI ...

Utilize string generic limitations as dynamically generated key

I am looking to create a type that can accept a string value as a generic argument and use it to define a key on the type. For example: const foo: MyType<'hello'> = { hello: "Goodbye", // this key is required bar: 2 } I attempted to ...