CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
LOTUSMS
LOTUSMS

Reputation: 10240

How to pass an Object to a prop value in VueJS

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

Upvotes: 1

Views: 59

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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>

Upvotes: 2

Related Questions