Элемент списка не отображается с использованием компонентов в концепции компонентов в Vue.js

Question

Мой код не работает. Я хочу напечатать свои задачи в списках, но пока не отображается ни один элемент списка. https://prnt.sc/pd6yx5 Я хочу отобразить вот так https://prnt.sc/pd6zoe Я хочу, чтобы компоненты были в концепции компонентов

HTML:

<div class="childcomponents-wrap">
    <div class="container"> 
        <div class="row">
            <div class="col-md-12 col-sm-12 col-12">
                <div id="childtasks"> 
                    <h2>Vue Components within Components</h2>
                    <task-list></task-list>
                </div>
            </div>
        </div>
    </div>
</div>

JS (Vue.js):

Vue.component('task-list', {
    template:
        '<div>
            <task v-for="task in tasks">{{ task.task }}</task>
        </div>',

    data(){
        return {
            tasks: [
                {task: 'Go to the United States', complete: true},
                {task: 'Go to Kerala', complete: true},
                {task: 'Go to Tamil Nadu', complete: false},
                {task: 'Go to Simla', complete: true}
            ]
        };
    }
});

Vue.component('task', {
    template: '<li><slot></slot></li>'
});

new Vue({
    el: '#childtasks'
});

Answer 1

Вы можете достичь этого, отправив tasks в качестве реквизита от task component и выполнив задачи проп. Надеюсь, это поможет.

Vue.component('task-list', {

    template:
    '<div>
        <task :tasks="tasks"></task>
    </div>',

        data(){

            return {

                tasks: [

                {task: 'Go to the United States', complete: true},
                {task: 'Go to Kerala', complete: true},
                {task: 'Go to Tamil Nadu', complete: false},
                {task: 'Go to Simla', complete: true}

                ]
            };
        }
    });

    Vue.component('task', {     
    props: ['tasks'],
    template: '<li v-for="task in tasks"><slot>{{task.task}}</slot></li>'

    });

    new Vue({

        el: '#childtasks'

    });

Answer 2

Вы можете сделать это следующим образом:

Структура компонента:

Vue.component('task-list', {
    template: 
        `<div>
            <li v-for="task in tasks">{{ task.task }}</li>
        </div>`,
    data(){
        return {
            tasks: [
                {task: 'Go to the United States', complete: true},
                {task: 'Go to Kerala', complete: true},
                {task: 'Go to Tamil Nadu', complete: false},
                {task: 'Go to Simla', complete: true}
            ]
        };
    }
});

new Vue({
    el: '#childtasks',
});

Вызов компонента:

<div id="childtasks">
  <task-list></task-list>
</div>

Проверьте это пример рабочего кода .