VUE - Как мне поместить значения внутри импортированных компонентов? - PullRequest
Новая
       4

VUE - Как мне поместить значения внутри импортированных компонентов?

0 голосов
/ 08 мая 2020

Я помню, что однажды видел, как поместить значения в текстовую область html после импорта компонентов в VUE.

Я не уверен, что есть способ сделать это, или я просто запомните вещи неправильно.

мой код такой, как показано ниже. 

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

После того, как я визуализирую это, он не отображается {{стоимость}}. Он показывает только пустое поле.

Как мне вставить {{value}} в элемент html?

Заранее спасибо.

Ответы [ 3 ]

1 голос
/ 08 мая 2020 
<comp v-for='(value,index) in listing' :key='index'>
   <slot>{{ value }} </slot>
</comp>

Тогда в слоте компонента comp используйте как 

<slot/>

Не включая подход для props, поскольку вы не хотите его использовать. Воспользуйтесь ссылкой выше, чтобы узнать больше о слотах.

1 голос
/ 08 мая 2020

Так как вы вводите значение внутри компонента, вы можете визуализировать его, используя слот в вашем компоненте , например: 

<template>
   <li class="list-group-item">
       <slot />
    </li>
</template>
1 голос
/ 08 мая 2020

Когда вы используете v-for, он вызывает все значения из массива, а :key='index' определяет каждую строку объекта из массива. Если ваш список объектов состоит из имени и фамилии в качестве вашего объекта, то значение, которое вы хотите вывести, будет {{value.firstname}}. В значении отсутствует имя объекта.

Можете попробовать один раз: 

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