laravel - 如何将数据从 Laravel 传递到 Vue.js 组件 v-for

Question

如何将数据从 Laravel 传递到 Vue.js 组件 v-for ？

我试过下面的代码：

<my-component
    v-for="(event, eventIndex) in {{ $data['events'] }}">
</my-component>

但它返回：

用 v-for 渲染的组件列表应该有明确的键。

Answer 1

您不要在绑定中使用花括号语法。

<my-component v-for="(event, eventIndex) in events" />

events数组需要在你的 vm 的数据函数中定义：

data() {
  return {
    events: [] // initialize as an empty array if you fetch the data async
  }
}

如果您想在页面加载时异步获取事件数据，请将 ajax 调用放在created()vm 的挂钩中：

created() {
  $.ajax({ method: 'get', url: 'your/api/to/get/events' })
    then((response)=> {this.events = response.data})
}

要解决 Vue 向您显示的警告消息，请添加一个:key="event.id"（如果您的事件具有id属性，否则为任何其他唯一属性）：

<my-component v-for="(event, eventIndex) in events" :key="event.id" />

Answer 2

错误消息清楚地表明您应该使用:key绑定：

用 v-for 渲染的组件列表应该有明确的键。

    <my-component
        v-for="(event, eventIndex) in {{ $data['events'] }}" :key="eventIndex">
         <!-- You can bind key to unique key, :key="event.id" -->
         <!-- However, it's perfectly good to use :key="eventIndex" -->
    </my-component>

来自资源：v2.2.0 发布

将 v-for 与组件一起使用时，现在需要一个键。升级时您可能会看到一堆“软警告”，但这不会影响您应用的当前行为。