[Vuejs]-VUE- How do I put the values inside of components imported?

1👍

Since you are entering a value inside of a component, you can render it by using a slot in your component like this:

<template>
   <li class="list-group-item">
       <slot />
    </li>
</template>

1👍

When you use v-for it calls all the value from an array and :key='index' defines each object row from an array. If your object listing consists of firstname, lastname as your object then the value you want to print will be {{value.firstname}}. You are missing object name in value.

Can you try this once :

<comp v-for='(value,index) in listing' :key='index'>{{value.index}}</comp>

1👍

<comp v-for='(value,index) in listing' :key='index'>
   <slot>{{ value }} </slot>
</comp>

Then in comp component use slot as

<slot/>

Not including the approach for props as you don’t want to use that. Use the link above to learn more about slots.

Leave a comment