Skip to content

vue-component-meta: Invalid component prop types when using options api + a prop with a default function #10964

Open
@adamDilger

Description

Vue version

3.4.27

Link to minimal reproduction

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUGELgQ5bwC+c6UBcA5AG4CuqNA3AFBsDGRAzvPuDgBeFBmx4CkYjAAUCNnEUoAhjGUyAlIgVLdUVDAZQs23WaXJVygPI4AXHABEACVQAbNxDgB1aG+RwAGJUIHAAIlaOOuak0XCkADRxYFRgPA7y5oopEGC2qA4AyjBQ2ADmSVlwOWAAKgDuEBlxVTAAnmAFcMWlWBUtWWjoygxuslqZVVn6hsa0rAMxi-FxiWykGuxsAPTbcAACMDwAtKgAHp2cMKdQVFBsMjj1cAJgmhoAdAAkNTwfbqg+jAABZbbhYPgvSS+KAAa3KwlEmBwryIgNkk0UljUmlM0wMRhMmKm2Js9icrg8Xhh-iCIXCkWWsV0a10v2aVRq+SKJXKlSyNQaTTxUzg7U6PN6-VFil2cAAchAYF0sF4hiMxhQGFgrsAiEzVutNhw5YcTudLtdULdoA8nlDwDD4X13t9fv9AWUQSwgA

Steps to reproduce

Create a component with defineComponent that has a prop with a default function e.g.

export default defineComponent({
    data() {
        return {
            dataOne: "Hello World From Data"
        }
    },
    props: {
        propOne: String,
        propTwo: {
            type: String,
            default() { // <-- this causes invalid prop types in the template
                return ''; 
            }
        }
    }
});

What is expected?

Correct prop types in the template

What is actually happening?

Invalid prop types, looks like it's showing array values as prop types

System Info

No response

Any additional comments?

Originally posted in volar repo, but requested to post here instead: vuejs/language-tools#3323

Activity

ferreraa

ferreraa commented on May 17, 2024

@ferreraa
Contributor

The problem seems to be related to the function syntax used.

A workaround to the issue is to define your default function that way default: () => { return ''; }

linzhe141

linzhe141 commented on May 20, 2024

@linzhe141
Contributor

When I comment out the data function, it works

const Comp = defineComponent({
  // data() {
  //   this.$props.propTwo
  //   return {
  //     dataOne1: 'Hello World From Data',
  //   }
  // },
  props: {
    propOne: String,
    propTwo: {
      default() {
        return 'foo'
      },
    },
  },
})

new Comp().$props.propOne

Or when my data function is written after props, it will also work.

const Comp = defineComponent({
  props: {
    propOne: String,
    propTwo: {
      default() {
        return 'foo'
      }
    }
  },
  data() {
    this.$props.propTwo
    return {
      dataOne1: 'Hello World From Data'
    }
  }
})

new Comp().$props.propOne
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      vue-component-meta: Invalid component prop types when using options api + a prop with a default function · Issue #10964 · vuejs/core