Vue js passing HTML button name attribute as a PROPS

Question

I created a custom component which contains an HTML button tag, so I'm using this component many times as a shared component into a parent component. I would like to know if I can pass the name attribute from the HTML button tag as a prop, so I can have a dynamically HTML button tag name attribute.

  <div class="toggle">
    <button
      class="btn"
      name="ships">
  </div>

<script>
export default {
  props: {
    ships: {
      type: String,
      required: true,
      default: ''
    }
  }
</script>


 <toggle
    :ships="white"
/>


 <toggle
    :ships="grey"
/>

 <toggle
    :ships="black"
/>

CODE

Have you got a JSFiddle setup you can share? We can edit this to help you. — wbdlc
– wbdlc, Commented Sep 26, 2018 at 13:05

Jns · Accepted Answer · 2018-09-26 13:48:45Z

2

I've updated your fiddle: https://codesandbox.io/s/00yxy5lqzn

Things I've changed:

Toogle.vue

<button class="btn" v-bind:name="ships">BUTTON </button>

To change an HTML attribute just add an v-bind: in front of it, because you can not use mustaches there.

App.vue

<div id="app">
  <toggle ships="black" />
  <toggle ships="grey" />
  <toggle ships="white"/>
</div>

Removed the double dot -> now the content of the property will be interpreted as an String.

Edit: Alternative you could do it this way (result is the same): <toggle :ships="'black'" /> <-- it's probably the better way

answered Sep 26, 2018 at 13:48

Jns

3,2871 gold badge20 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 04:19:20Z

1

You can do this without using a prop by using inheritAttrs.

export default {
    inheritAttrs: false,
    name: "toggle",
};

And then use $attrs to access any fallthrough attributes e.g. name.

<div class="toggle">
    <button class="btn"
    v-bind:name="$attrs.name">BUTTON </button>
</div>

And then using your component would just be

<div id="app">
    <toggle name="black" />
    <toggle name="grey" />
    <toggle name="white"/>
</div>

edited Jul 16, 2022 at 4:19

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 26, 2018 at 13:58

Steven B.

9,4323 gold badges28 silver badges50 bronze badges

3 Comments

Steven B. Over a year ago

On your toggle component definition.

Kaiser91 Over a year ago

ok, I see. Yes, it also works, probably It's a more elegant solution to use on HTML attributes rather than props

Steven B. Over a year ago

Yeah I use it when I have an element wrapping the actual element I want my attributes to be applied to.

Collectives™ on Stack Overflow

Vue js passing HTML button name attribute as a PROPS

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related