Vue: Allow component props to read original prop expression

[kennardconsulting]

What problem does this feature solve?

I am the author of http://metawidget.org, a dynamic form component. In porting Metawidget to Vue, I am having difficulty because, when passing a prop to a component, I don't seem to be able to access the prop's original expression?

For example, for this Vue component:

Vue.component( 'my-component', Vue.extend( {
    template: '<output>The answer is {{value}} but what is the question?</output>',
    props: [ 'value' ]
} ));

new Vue( {
    el: '#app',
    data() {
        return {
            theQuestion: '42'
      }
    }
} );

and this HTML:

<div id="app">  
    <my-component v-model="theQuestion"></my-component>
</div>

how could the Vue component access the text string theQuestion as contained in the v-model attribute? Fiddle here: https://jsfiddle.net/oznz8a4z/

What does the proposed API look like?

Any of several approaches would be suitable:

1. Extend the component 'props object notation' to pass a second parameter to 'validator' so that I could capture the original expression as well as the value

2. Allow the $attrs array to hold the original expression for the prop (this is what Angular 1 does)

[posva]

Why do you need that? What matters is the actual value, the data

[kennardconsulting]

I agree the value is very important.

However, in my case I'm trying to dynamically generate nested subcomponents based on a top-level JSON schema. JSON schema lets me describe the generated UI using richer metadata (e.g. required fields, alternate label texts etc)

It is important I understand the 'path' (e.g. 'foo.bar.baz') of the original expression so that I can navigate that same path into the JSON schema.

[leopiccionia]

Could something like this do the job? https://jsfiddle.net/p9pna5o5/

[kennardconsulting]

If I understand your fiddle, you are passing the original expression via a second parameter (context). I can do this, but it doesn't seem very D.R.Y.

If I do:

<my-component v-model="foo.bar" path="foo.bar"/>

Aren't I relying on the second parameter exactly mirroring the first, without any enforcement? This would seem prone to copy/paste errors.

[leopiccionia]

Actually, custom directives provide more or less the functionality you want. The only con is that (I don't know if this is a bug or a feature) the same element can't have twice the same directive with same arguments [fiddle (notice I'm using arbitrary arguments)].

[HerringtonDarkholme]

You can already do that in Vue. Working demo: https://jsfiddle.net/7c1ac60r/

But I wonder how this can be done in other frameworks. This feature is highly reflective in nature like asking the source string of arguments(not parameters) passed to function.

[kennardconsulting]

@leopiccionia I like the custom directives approach. However component-level custom directives can only be used on child components it seems. Is there a way to use them on the top-level component itself?

[HerringtonDarkholme]

https://vuejs.org/v2/api/#Vue-directive

So I think @kennardconsulting 's problem is probably solved. And as stated before, reading prop expression is highly reflective. The use case mentioned here probably doesn't weigh out the performance overhead it would incur.