将特定属性传递给 v-for 循环中的每个视图实例

Question

有没有一种方法可以将特定属性绑定到 v-for 循环中子 vue 组件的每个实例？

例如，考虑以下 vueify 组件：

<template>
    ...
    <div class="cal-body">
        <div v-for="week in weeksInMonth">
            <cal-week class='cal-week' :weekdata="events-week$index" :events="events"></cal-week>
        </div>
    </div>
    ...
</template>

<script>
    module.exports = {
        ...
        computed:{
            return {
                events-week1:[
                    {...},
                    {...}
                ],
                events-week2:[
                    {...},
                    {...}
                ]
            }
        }        
    }
</script>

在此示例中，模板用于日历，其中每周组件都是当前组件的子组件。

我知道我可以计算 events 或数据属性并将其传递进来，但我只想传递属于特定周的事件。

我已经在下面尝试过，但它不起作用，而且我在文档中找不到执行此操作的方法。

有办法吗？如果没有，还有什么选择？

谢谢！

Answer 1

您应该将事件周表格计算数据移动到 data 并将它们存储在数组中，例如

data: function(){
   return {
      events: {
         'events-week1':[
            {...},
            {...}
         ],
         'events-week2':[
            {...},
            {...}
         ]
      }
   }

循环时你可以

<div v-for="week in weeksInMonth">
   <cal-week class='cal-week' :weekdata="events['events-week' + $index]"  :events="events"></cal-week>
</div>

将特定属性传递给 v-for 循环中的每个视图实例

Passing specific properties to each view instance in v-for loop

javascript

mvvm

vue.js