Produce a vue attribute

Question

Produce a vue attribute

I am looking to display a property in my component.

My template includes:


<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"}
        })

The setup works with any component or property. However, I encounter an issue when trying to render the v-text. This may be due to the -

How can I successfully render the v-text?

javascript vue.js

Answer 1

Answer №1

Initially, it's important to note that unquoted property names are limited to alphanumerics, _, and $. To include a -, you must use quotes:

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

You can use double or single quotes based on your preference.

If there are no quotes, the code may not parse properly, resulting in error messages.

Additionally, v-bind cannot be used for v-text as they are separate directives. Using them together like this:

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

will just create a regular DOM attribute instead of a directive.

The correct approach is to have a separate data entry:

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

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>

It's worth mentioning that an input element cannot contain any content, so using v-text would be meaningless in that context.

Answer 2

Initially, it's important to note that unquoted property names are limited to alphanumerics, _, and $. To include a -, you must use quotes:

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

You can use double or single quotes based on your preference.

If there are no quotes, the code may not parse properly, resulting in error messages.

Additionally, v-bind cannot be used for v-text as they are separate directives. Using them together like this:

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

will just create a regular DOM attribute instead of a directive.

The correct approach is to have a separate data entry:

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

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>

It's worth mentioning that an input element cannot contain any content, so using v-text would be meaningless in that context.

Answer 3

Answer №2

It appears that names starting with "v-" are reserved. You may need to rename v-text to simply text and manage it within the component.

Check out this link for more information on Special Attributes in Vue.js

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

Answer 4

It appears that names starting with "v-" are reserved. You may need to rename v-text to simply text and manage it within the component.

Check out this link for more information on Special Attributes in Vue.js

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

Produce a vue attribute

Answer №1

Answer №2

Similar questions

The onprogress event for the XMLHttpRequest object threw an error due to an Uncaught SyntaxError, indicating

Error message "Vue indicates that the modules referenced were not discovered" when attempting to utilize a SCSS file

Verify whether an object possesses all the attributes of a class in TypeScript

Issue with displaying bound value in AngularJS textbox

Having trouble retrieving the elements from the JSON array defined in EJS within the JavaScript script tags

"Integrate envMap into the materials section of the model.json file

The error message "TypeError Cannot read properties of undefined (reading 'backdrop') - bootstrap v5.2.1 modal" is indicating that there is an

Apply various filters to extract and refine information from the database

Ways to showcase every resource from an API in React JS

How is UI Router Extras causing unexpected errors in my unit tests?

Obtain an indeterminate value from a variable

What is the best way to display a div based on a keyword match?

Tips for passing a variable from one function to another file in Node.js

Utilizing a promise instead of making a jQuery ajax request

Detecting the State of the Keyboard in Ionic 2

Setting attributes on dynamically appended elements using Jquery

How can I define the PropType for an object containing a combination of strings and functions?

What is the reason for the delay in the firing of this document.ready event

Chrome Extension for Extracting Data from Websites

Steps to implement a body {} style on a particular vue component