Vuejs深度嵌套计算属性
Vuejs深度嵌套计算属性
提问于 2015-09-18 07:22:16
当涉及到深度嵌套的计算属性时，我真的不知道应该把function() { return {} }放在哪里，不应该放在哪里。
顺便说一下，这是在一个组件中！
computed: {
styles: function() {
return {
slider: function() {
return {
height: {
cache: false,
get: function() {
return 'auto';
}
},
width: {
cache: false,
get: function() {
return $('#slideshow').width();
}
}
}
}
}
}
},这是返回未定义的。当我去掉滑块索引内部的function() { return {} }时，当我执行styles.slider.width而不是get()返回时，它返回一个对象。它只显示了一个以cache和get作为索引的对象。
谢谢你的帮助！
我这样问的原因是因为我有多个嵌套的组件，这些组件涉及到来自父组件的样式。滑块，标签，旋转木马等等。所以我想这样组织它们。
回答 2
Stack Overflow用户
发布于 2019-03-26 03:55:42
我相信你的意思是返回一个计算对象，而不是以嵌套的方式实际构造计算？
其他人关于'computed‘钩子没有嵌套语法的说法是正确的，你可能需要用不同的结构来构造它。
这可能适用于您:我以类似的方式生成许多对象。
computed: {
computedStyles(){
var style = {slider:{}}
style.slider.height = 'auto'
style.slider.width = this.computedSlideshowWidth
return style
},
computedSlideshowWidth(){
return $('#slideshow').width()
}Stack Overflow用户
发布于 2020-11-13 19:46:14
根据2020和Vue 2.6.12，这是完全可能的。我相信从v.2开始这是可能的，但不能确认。
下面是一个工作示例：
this.computed = {
// One level deep nested,
// get these at `iscomplete.experience`
// or `iscomplete.volume`
iscomplete: function() {
return {
experience: this.$data.experience !== null,
volume: this.$data.volume > 100,
// etc like this
};
},
// More levels deep nested.
// Get these at `istemp.value.v1 and `istemp.value.v2`
istemp: function() {
return {
value1: {
v1: this.$data.experience,
v2: 'constant'
}
}
}
};因此，您将能够访问模板中的深度嵌套计算，例如，下面的<span v-text="iscomplete.experience"></span>将为上面计算的第一个示例输出<span>true</span>。
请注意：
由于Vue v.2中的关键字是deprecated;
- Vue，
- 不会执行分配给
computed对象的嵌套键； - 你不能计算非Vue反应的东西，在你的例子中是
$('#slideshow').width()。这意味着在这种情况下，它们不会在内容更改时重新计算(这是计算的唯一目的)。因此，这些密钥应该从computedkey中删除。
除此之外，我发现嵌套的计算有时非常有帮助，可以让事情保持更好的顺序。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32641486
复制相关文章
相似问题