Question

<tasks>
    @foreach ($task as $tasks)
        <task>{{ $task->name }} [{{ $task->completed }}]</task>
    @endforeach
</tasks>

上面是我用来从DB输出任务列表的代码。这是我的Vue组件：

Vue.component('tasks', {
    template: `
        <div>
            <task v-for="task in tasks"> {{ task.name }} </task>
        </div>
    `,
    data: function () {
        return {
            tasks: [
                { name: "task", completed: true }
            ]
        }
    }
});

如何将PHP foreach循环中输出的任务添加到Vue组件数据任务中？我想我需要使用道具，但究竟是怎么回事？我将我的组件放在/resources/assets/js/components中。我可能已经猜到了，我正在使用Laravel。谢谢。

Answer 1

将你的任务作为道具传递：

<tasks :tasks="@json($tasks)"></tasks>

然后在组件中设置该道具：

Vue.component('tasks', {
    template: `
        <div>
            <task v-for="task in tasks"> {{ task.name }} </task>
        </div>
    `,
    props:['tasks']
});

如果您有单独任务的单独组件，您可以再次将任务作为道具传递：

<task v-for="task in tasks" :task="task"></task>

将html节点中的元素添加到vuejs数据中

1 个答案: