Vetur warns about a missing prop type error message "prop doesn't exist on type 'never'" while trying to use a prop on a template

I'm currently working with the Quasar framework using Vue composition API and TypeScript in VSCode.

While attempting to utilize a prop in the template, Vetur is showing me an error stating

Property 'open' does not exist on type 'never'

Source

<template>
  <q-drawer v-model="open">
    test
  </q-drawer>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';

export default defineComponent({
  name: 'AuthedLayout',
  props: {
    open: {
      type: Boolean,
      required: true
    }
  },
  components: {},
  setup() {}
});
</script>

<style></style>

Any assistance would be greatly appreciated

Answer №1

The problem was discovered when I realized that the setup function did not include a return statement. The error message led me astray.

Answer №2

If you're using Quasar and encountering a similar problem with antd in Vue, try the syntax below. The v-model:value should function properly and synchronize with q-drawers' v-model:

  <q-drawer v-model:value="open">
    test
  </q-drawer>

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

How to Utilize ngIf and ngFor Together in Angular 4 for the Same Element in ngFor

Just starting with Angular 4 and experiencing a roadblock in my code. Here is the snippet of my code: JSON: [{"name": "A", "date": "2017-01-01", "value": "103.57"}, {"name": "A", "date": "2017-01-08", "value": "132.17"}, ...

multiple verifications, perplexing

Currently, I am using the vee-validate library to validate my input. In this case, I have two requirements: first, the length of the value should meet a specific example such as length: 2, which is perfect. However, now I also need to ensure that the enter ...

What is the best way to implement Bootstrap's range input design with noUiSlider?

Is it possible to customize the appearance of the noUiSlider to resemble the Bootstrap style for input ranges? This would involve changing the handle shape to a circle and modifying the sliding range. You can see an example below showcasing both the noUiSl ...

Issues resolving the signature of a parameter in a Typescript decorator within vscode

I encountered an error while attempting to decorate a class in my NestJS service. The Typescript code compiles without any issues, but I am facing this problem only in VSCode. Unable to resolve signature of parameter decorator when called as an expression ...

The choice between using `npm run serve` and `serve -s dist` in Vue CLI

I have recently developed a Vue app using Vue CLI 3. When I run the command npm run serve in VS Code, the application is successfully displayed at http://localhost:8080. I then proceed to serve the 'dist' folder using the following commands: npm ...

Trouble arising from authenticating in Laravel and Vue.js

I've successfully implemented authentication using Laravel as the backend and Vue.js as the frontend with the help of the jwt package. The registration, login, and logout requests are all functioning properly. The process involves the user entering t ...

Clear out the existing elements in the array and replace them with fresh values

Within my Progressive Web App, I am utilizing HTTP requests to populate flip cards with responses. The content of the requests relies on the selected values. An issue arises when I choose an item from the dropdown menu. It triggers a request and displays ...

Issue encountered: Unable to access the property 'loadChildren' as it is undefined, while attempting to configure the path

How can I conditionally load the route path? I've attempted the code below, but it's throwing an error. Can someone guide me on how to accomplish this task? [ng] ERROR in Cannot read property 'loadChildren' of undefined [ng] i 「w ...

Leveraging TypeScript Record for creating a limited set of object keys

Is it feasible to create a Record that maps selected keys from one object to another? I am attempting to map Google's libphonenumberCountryCode options to my custom formatting objects. Currently, I have: const countryOptions: Record<CountryCode, Co ...

A comprehensive guide on utilizing the loading.tsx file in Next JS

In the OnboardingForm.tsx component, I have a straightforward function to handle form data. async function handleFormData(formData: FormData) { const result = await createUserFromForm( formData, clerkUserId as string, emailAddress a ...

Error: The method that is annotated with @action in MobX is not defined

I'm encountering a peculiar problem with the MobX annotations, where a method marked with @action seems to be missing from the resulting object. Let's consider the following TypeScript code snippet as a basic example: export class Car { @ob ...

Utilizing Vue.js and Buefy to create a custom carousel with locally sourced images

I'm having trouble figuring out how to add local images to the Buefy carousel. Is there something I'm missing? I've attempted to modify the template section to include b-image but with no success. Thank you for any help! Code: <template& ...

Encountering a TypeError with Angular 5 Interceptor: The do function is not recognized when using next.handle(...)

While developing an angular interceptor to verify the validity of my auth tokens, I encountered an issue where the do method is not recognized by angular. The alternative solution involving subscribe was effective, but it led to duplicate requests being se ...

Utilizing both KonvaJS and Vue-Konva, we can easily incorporate Text or Label elements into every Rect shape that we

I'm currently utilizing Konvajs/Vue-Konva in my Vuejs/Nuxt project. With Konva, I am dynamically generating Rect shapes during runtime. Is there a method to insert a Text/Label within each of these shapes? The goal is to assign a distinct name to ever ...

The TypeError encountered when using vue.js push arises from attempting to access the 'name' property of an undefined value

Here is a code snippet I am working with: new Vue({ el: '#core', data: { checkedThemes: [] ... } }) Afterwards, I have the following code: mounted() { ... var theme = parseInt(parameters['theme&apo ...

The objects-to-csv module encountered an error: fs.existsSync is not a valid function for this

"TypeError: fs.existsSync is not a function" Whenever I try to create a CSV file and input some data into it, this error message pops up. const objectstocsv = require('objects-to-csv'); export default { data () { return { ...

Steps for attaching a custom Vue component to markers in L.markerClusterGroup

I am struggling with rendering custom markers and popups in a Vue component. https://i.sstatic.net/HJ1F8.png Utilizing L.markerClusterGroup, I have attempted to attach custom components for markers and popups, but unfortunately, it is not functioning as ...

Utilizing statuses in Typescript React for conditional rendering instead of manually checking each individual variable

It's common for developers, myself included, to perform conditional rendering by checking variable values like this: import React, { useState, useMemo } from 'react' const Page = () => { const [data, setData] = useState<any[]>() ...

When utilizing DomSanitizer, Angular2 suddenly ceases to function properly

I've been working with Angular 2 and TypeScript. Everything was going well until I encountered an issue with my pipe, which is causing the DomSanitizer to interfere with the (click) event functionality. Even though the (click) code appears intact in ...

Leveraging the power of SCSS within Blade templates, much like Vue components

Currently, I am working with a combination of Laravel 8 and Vue.js to build a website that uses both Blade and Vue components. I am looking for a way to include SCSS code specifically in one of my Blade templates, similar to how it is done in a Vue compo ...