CODEWITHSUNDEEP
javascripthtmlvuejs2
The Bassman
The Bassman

Reputation: 2361

Can "name" attribute be used for custom VueJS components

When you create a component for example we name it test-component. We can apply and id and/or class to it to identify it right? Can we also the name attribute so that this custom component can be used as a form input (since it can contain a input inside)?

<test-component class="test-class" name="test-input" />

If not, what's the alternative?

Upvotes: 0

Views: 1298

Answers (1)

demianh
demianh

Reputation: 343

If you add any attributes to the component, they will be added to the first element of the component (unless they are registered as props).

So, if you don't want the name attribute to appear on the first element of the component, you need to use Props. Here is an example:

<template>
  <div>
    <input type="text" :name="name">
  </div>
</template>

<script>
export default {
  name: "TestComponent",
  props: ['name']
};
</script>

Now you can use the component as you described. The result will be:

<div class="test-class">
    <input type="text" name="maycustomname">
</div>

Read more about props in the official documentation: https://v2.vuejs.org/v2/guide/components-props.html

Upvotes: 3

Related Questions