Generate id's based on parent prop on Vue JS

Question

I am trying to create a child component where the parent passes a prop and then the child computes several id's based on the passed prop. So far the only way I have managed to do it is by doing a computed property for each of the ids. I am sure there has to be an easier way to do it directly in the template.

For example the parent:

 <Dates id="secondary_school" />

the Dates component:

<template>
  <div :id="{{id}}_container">
    <div :id="{{id}}_timeline">
     <input :id="{{id}}_school_name" />
     ...
    </div>
  </div>
</template>

I know I cannot use squiggly brackets because Vue will complain about interpolation but if I do not use them then it doesn't find the prop being passed.

Would it be possible to have something similar to:

    <template>
      <div :id="id" + "_container">
        <div :id="id" + "_timeline">
         <input :id="id" + "_school_name" />
         ...
        </div>
      </div>
    </template>

The Alpha · Accepted Answer · 2018-06-08 19:26:31Z

3

You can achieve that using something like this:

<div :id="id+'_container'">

<!-- Possible output: <div id="secondary_school_container"> -->

Instead of writing it like this:

<div :id="{{id}}_container">

edited Jun 8, 2018 at 19:26

answered Jun 8, 2018 at 16:38

The Alpha

147k30 gold badges294 silver badges313 bronze badges

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

Collectives™ on Stack Overflow

Generate id's based on parent prop on Vue JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related