question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Functional component prop `value` displayed alongside v-model prop, when `@model` used in comment

See original GitHub issue

Current behavior

s-select-table s-select-code

In the table of props, I am getting the value prop still, even though I’m using the @model tag and the v-model prop is showing.

This is a functional component.

Expected behavior

I expect the v-model prop to show but the value prop to not show.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
djbusstopcommented, Jul 8, 2019

Solved with this in styleguide.config.js

propsParser(filePath, source) {
    const component = vda.parse(filePath)
    // remove second instance of value if v-model
    if (component.props) {
        if (component.props.value && component.props['v-model']) {
            delete component.props.value;
        }
    }
    return component;
},
0reactions
djbusstopcommented, Jul 9, 2019

Thank you 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using v-model with a prop on VUE.JS - Stack Overflow
Answer is from https://github.com/vuejs/vue/issues/7434. Props are read-only, but you are trying to change its value with v-model.
Read more >
Props | Vue.js
The prop is used to pass in an initial value; the child component wants to use it as a local data property afterwards....
Read more >
How To Add v-model Support to Custom Vue.js Components
To support v-model , the component accepts a value prop and emits an input event. Use the component like this: <basic-input v-model=" ...
Read more >
Making sense of Multiple v-model Bindings in Vue 3
In Vue 2, to build a complex Component that supports two-way data binding, it utilizes a single v-model with one full-blown payload.
Read more >
Components and Props - React
Function and Class Components. The simplest way to define a component is to write a JavaScript function: function Welcome(props) ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found