CODEWITHSUNDEEP
javascriptvue.jsdata-visualization
BS100
BS100

Reputation: 873

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

I remember I have seen once how to put the values in the html text area after importing components in VUE.

I'm not sure there is a way to do that or I just remember things in a wrong way.

my code is as below.

<template>
    <div class="container">
        <div class="row">
            <Heading></Heading>
        </div>
        <hr>
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <ul class="list-group">
                    <comp v-for='(value,index) in listing' :key='index'>{{value}}</comp>
                </ul>

            </div>
            <serverstat></serverstat>
        </div>
        <hr>
        <div class="row">
            <footing></footing>
        </div>
    </div>
</template>

<script>
import Heading from './assets/Heading.vue';
import comp from './assets/comp.vue';
import serverstat from './assets/serverstatus.vue';
import footing from'./assets/footing.vue';

export default {
data() {
    return {
        listing: ['max','toms','judy','michael','dumdum']
    }
},

    components: {
        Heading,comp,serverstat,footing
    },
};
</script>

<style>

</style>

-comp-

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

<script>
export default {

}
</script>

<style>

</style>

After I render this, it doesn't show {{value}}. It only shows blank .

How do I insert the {{value}} within the html element?

Thank you in advance.

Upvotes: 0

Views: 846

Answers (3)

Neelansh Mathur
Neelansh Mathur

Reputation: 716

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>

Upvotes: 1

sandesh phuyal
sandesh phuyal

Reputation: 111

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>

Upvotes: 1

Himanshu
Himanshu

Reputation: 274

<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.

Upvotes: 1

Related Questions