How to pass an Object to a prop value in VueJS

Question

I am turning some of my components into re-usable components. I am running into some issues here that I can't figure out. Coming from a React environment, my thoughts are getting jammed up. Basically, I need to be able to make a prop more versatile than just a Boolean or String, or any primitive value. I need to be able to pass "content" to it that could change from page to page depending on what is used for

For example, I have this stateless component:

<template>
   <div class="cts-split-grid cts-alt-header">
      <div>{{title}}</div>
      <div v-if="rightSide" class="cts-split-grid">
        <span class="uk-text-small">Pod or station is open</span>
        <span class="legend-color"></span>
      </div>
   </div>
</template>

<script>
 export default {
     name: "page-alt-header",
     props: {
         title: {
             type: String
         },
         rightSide: {
             type: Boolean
         }
     },
     data() {
         return {
             value: ""
         };
     }
 };
</script>

That I am using this way

 <AltHeader :title="'POD' + currentPodId" rightSide />

As you can see, in the title I am passing an object currentPodId bounded to the component. That was easy since that object only produces a data value.

I want to remove this(below) from the re-usable component and be able to add it in the component using the AltHeader as a rightSide Prop:

<span class="uk-text-small">Pod or station is open</span>
<span class="legend-color"></span>

The reason why is because this component's right side can be anything from an Icon component to a button, to a small block of HTML, etc.

How can I do this? How can I set up rightSide prop to accept anything I pass to it at the component level depending on how I need to use it?

Thanks

tony19 · Accepted Answer · 2022-07-15 23:52:06Z

2

You should use slots

<template>
   <div class="cts-split-grid cts-alt-header">
      <div>{{title}}</div>
      <div v-if="rightSide" class="cts-split-grid">
       <slot></slot>
      </div>
   </div>
</template>

and add right Side content as follows :

  <AltHeader :title="'POD' + currentPodId" rightSide >
      <!-- side right content here -->
  </AltHeader>

edited Jul 15, 2022 at 23:52

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 26, 2019 at 18:20

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

How to pass an Object to a prop value in VueJS

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