所以,我有一个Vuex
状态,看起来像这样:
state: {
keylist: ['key1', 'key2', 'key3'],
items: {
key1: {title: "First Item"},
key2: {title: "Second Item"},
key3: {title: "Third Item"}
}
}
我有一个列表组件,像这样从root引用:
<event-list :list="this.$store.state.keylist"></event-list>
组件的定义如下:
Vue.component('event-list', {
template: "<ul><li v-for='key in list'>{{ key }}</li></ul>",
props: {
list: {
type: Array,
required: true
}
}
})
现在,这一切都很好地显示了密钥。
但是,当然,我真正想做的是在每个项目上使用组件,该组件由其键找到。那就是我被困住的地方。我有一个类似这样的项目组件:
Vue.component('event-list-item', {
template: "<h4>{{ item.title }}</h4>",
props: {
item: {
type: Object,
required: true
}
}
})
但是我不知道如何将父组件中的key
转换为子组件中的item
。此模板在第一个花括号上倒转:
<ul><li v-for='key in list'><event-list-item :item="this.$store.state.items.{{key}}"</li></ul>
在任何情况下,这都不像正确的解决方案那样!那么什么是 正确的呢?
答案 0 :(得分:2)
对我来说,首先想到的是您嵌套的物品无处可放。您可能想看看用于嵌套这样的组件的插槽: https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots
无论如何,一些注意事项:
在您的用例中,最好将列表包含在事件列表项中,并仅重复实际需要的元素,而不是在仅包裹另一个组件的无用组件中检索它。我的意思是:
Vue.component('event-list-item', { template: "<li v-for="item in list"><h4>{{ item.title }}</h4></li>
商店被认为是唯一的真理来源,因为它应该更容易从直接受影响的组件中访问它,从而使您不必为多层分发多个道具。就像你在做。对于深层嵌套的组件,此基础有点脆弱。
请记住,每个组件都有不同的作用域,它们不会共享未明确传递的内容。
答案 1 :(得分:1)
您应该访问items
之类的状态key
字段:
<ul><li v-for='key in list'><event-list-item :item='key' /></li></ul>
及其子组件中:
template: "<h4>{{ store.state.items[item].title }}</h4>"
答案 2 :(得分:1)
遍历items
对象的属性没有问题。它将与遍历数组相同。
<ul>
<li
v-for="item in items"
:key="item.title"
>
<event-list-item :item="item" />
</li>
</ul>
为了更好的实践,您可以在getter内格式化数据,分配键并返回准备渲染的列表,这样就不会将其他逻辑委派给组件。
请注意,代码示例中使用的key
供Vue内部使用,因为它是保留的special attribute,建议在使用v-for
循环时出现。