CODEWITHSUNDEEP
javascriptvue.js
polaupa
polaupa

Reputation: 169

Render a vue property

I want to render a property in my component.

I have in the template: <v-flex v-for="c in components"> <component :is="c.component" v-bind="c.prop"></component> </v-flex>

And in the script:

...
mounted(){
        this.components.push({, 
          component: "input", 
          prop: {type:"checkbox", v-text:"My CheckBox"}
        })

It works using any component or property. But the problem is when I'm trying to render the v-text. I think it is because of the -

How could I render successfully the v-text?

Upvotes: 1

Views: 48

Answers (2)

DonTristras
DonTristras

Reputation: 5

I think "v-" starting names are reserved, you might have to change v-text to text and then handle it inside the component.

https://v2.vuejs.org/v2/api/#Special-Attributes

mounted(){
        this.components.push({, 
          component: "input", 
          prop: {type:"checkbox", text:"My CheckBox"}
        })

Upvotes: 0

skirtle
skirtle

Reputation: 29092

Firstly, unquoted property names can only contain alphanumerics, _ and $. So to include a - you need to quote it:

{ "v-text": "My Checkbox" }

Double or single quotes will work, your choice.

Without the quotes I wouldn't even expect the code to parse/transpile, so I would have expected there to be a clear error message.

The next problem is that you can't use v-bind for v-text. They are two separate directives so what you're effectively doing here is:

v-bind:v-text="'My Checkbox'"

That will just be interpreted as a DOM attribute with no special meaning. If you inspect the DOM you'll see the v-text attribute, which wouldn't be there if it were being interpreted as a directive.

Instead you'll need a separate entry in your data:

this.components.push({, 
  component: "input", 
  prop: {type:"checkbox"},
  text: "My CheckBox"
})

and then in your template:

<component
  :is="c.component"
  v-bind="c.prop"
  v-text="c.text"
></component>

or:

<component
  :is="c.component"
  v-bind="c.prop"
>
  {{ c.text }}
</component>

All of that said, an input element cannot have any content anyway, so trying to use v-text would be meaningless in that case.

Upvotes: 1

Related Questions