Question

我已经在代码中使用了几个月，而且仅在Vue中使用了几个天。所以我为这个noobish问题道歉，但我有点被困在这里。

我试图渲染一个应该大致如下的组件结构：

<div id="app">   
 <list-component>
     <item-component></item-component>
     <item-component></item-component>
     <item-component></item-component>
  <list-component>
</div>

整个清单来自我用axios获得的json。到目前为止，这么好......问题是：我需要为列表的每个条目创建一个项目组件。

显然我试图在我的项目中添加v-for。通过这样做，我可以按预期复制项目组件。但是，我无法找到在项目组件模板中正确呈现数据的正确方法。

这是一个jsfiddle来说明我想要做的更好：https://jsfiddle.net/devnoob/4r3txkvy/

这个实际的代码并不能解决问题，因为我没有为每个项目提供组件。

我尝试使用这个线程VueJS - Component inside of v-for中提到的props和v-bind 但是我找不到让它正常工作的方法。

谢谢！

Answer 1

我想你问的是，每个pd.concat([sales, forecast.set_axis(sales.index[-len(forecast):], inplace=False)], axis=1)组件如何接收并显示它自己的数据？

https://jsfiddle.net/zw7ee4sh/1/

答案是alarm-item。当您需要将数据从父级传递给子级时，您必须执行两项操作。

父母：将支柱作为约束传递
孩子：声明你希望收到的道具。

首先，使用props

v-for

第1步：这是您将<alarms-item v-for="alarm in myAlarms" :alarm="alarm" :key="alarm.id"></alarms-item>作为道具传递给每个alarm

alarms-item

第2步：:alarm="alarm"组件应声明它希望收到名为alarms-item的道具。

alarm

在Vue.component('alarms-item', { template: '#alarms-item-template', props:['alarm'], })模板中，alarms-item对象现在在范围内，您可以根据需要显示alarm对象。在这里，我正在遍历所有键/值并打印它们。

alarm

作为学习体验，请尝试从<script type="text/x-template" id="alarms-item-template"> <div> <div v-for="(val,key) in alarm"> {{ key }} - {{ val }} </div> <hr> </div> </script>中删除:alarm="alarm"。您将看到没有任何内容被渲染，因为每个v-for组件都没有收到alarm-item道具，即使您将其声明为道具。你可以反过来做，保持alarm并删除:alarm="alarm"，同样的结果，没有任何东西被渲染。

v-for的每个项目的组件

1 个答案: