Vue 父组件访问子组件的计算属性 [英] Vue parent component access to child component's computed Property
问题描述
在 Vue JS 中,当数组元素(子元素)的计算属性发生更改时,我无法观察数组的更改.
我已经在我编写的示例 JSFiddle 中将问题归结了,因此该示例在逻辑上可能没有意义,但它确实显示了我的问题.
https://jsfiddle.net/trush44/9dvL0jrw/latest/>
我有一个包含一系列颜色的父组件.每种颜色都使用子组件呈现.子组件有一个名为IsSelected"的计算属性.当任何数组元素上的IsSelected"计算属性发生更改时,我需要遍历整个数组以查看是否仍然选择了数组中的至少 1 个元素,然后相应地设置 IsAnyCheckboxChecked.
- 你能帮我理解我是否在做我的计算和观察正确吗?
- 在父组件的监视中,为什么 this.colors[i].IsSelected即使 IsSelected 在 DOM 中呈现得很好,也返回 undefined?
是否选择了任何颜色?...... {{IsAnyCheckboxChecked}}<父内联模板:colors="ColorList"><div><the-child inline-template :color="element" :key="index" v-for="(element, index) in colors"><div>{{颜色.文本}}<input type="checkbox" v-model="color.Answer"/>IsChecked?......{{IsSelected}}</the-child>
</父母>
Vue.component('the-child', {道具:['颜色'],计算:{IsSelected: 函数 () {返回 this.color.Answer;}}});Vue.component('the-parent', {道具:['颜色'],手表: {颜色: {处理程序:函数(颜色){var isAnyCheckboxChecked = false;for (var i in this.colors) {//IsSelected 未定义,即使它是孙组件中的计算"属性如果(this.colors[i].IsSelected){isAnyCheckboxChecked = true;休息;}}this.$parent.IsAnyCheckboxChecked = isAnyCheckboxChecked;},深:真实}}});//根视图模型var app = new Vue({el: '#app',数据: {'IsAnyCheckboxChecked':假,'颜色列表':[{'文本':'红色','答案':对},{'文本':'蓝色','答案':假},{'文本':'绿色','答案':假}]}});
使用 $refs 直接访问孩子.在 v-for ref 内部变为和数组.因为你的 v-for 是基于 this.color.length 无论如何使用相同的东西来循环 $ref var 中的值.
https://jsfiddle.net/goofballtech/a6Lu4750/19/>
for (var i in this.colors) {如果 (this.$refs.childThing[i].IsSelected) {isAnyCheckboxChecked = true;休息;}}
In Vue JS, I'm unable to watch for changes to an array when changes are made within an array element's (child's) computed Property.
I've boiled down the issue in a sample JSFiddle I wrote, so the example may not make sense logically but it does show my issue.
https://jsfiddle.net/trush44/9dvL0jrw/latest/
I have a parent component that holds an array of colors. Each color is rendered using a child component. The child component has a computed Property called 'IsSelected'. When the 'IsSelected' computed Property changes on any array element, I need to loop through the entire array to see if at least 1 element in the array is still selected then set IsAnyCheckboxChecked accordingly.
- Can you help me understand if I'm doing my computed and watch correctly?
- In the-parent component's watch, why does this.colors[i].IsSelected return undefined even though IsSelected renders just fine in the DOM?
<div id="app">
Is any Color Selected?...... {{IsAnyCheckboxChecked}}
<the-parent inline-template :colors="ColorList">
<div>
<the-child inline-template :color="element" :key="index" v-for="(element, index) in colors">
<div>
{{color.Text}}
<input type="checkbox" v-model="color.Answer" />
IsChecked?......{{IsSelected}}
</div>
</the-child>
</div>
</the-parent>
</div>
Vue.component('the-child', {
props: ['color'],
computed: {
IsSelected: function () {
return this.color.Answer;
}
}
});
Vue.component('the-parent', {
props: ['colors'],
watch: {
colors: {
handler: function (colors) {
var isAnyCheckboxChecked = false;
for (var i in this.colors) {
// IsSelected is undefined even though it's a 'computed' Property in the-grandchild component
if (this.colors[i].IsSelected) {
isAnyCheckboxChecked = true;
break;
}
}
this.$parent.IsAnyCheckboxChecked = isAnyCheckboxChecked;
},
deep: true
}
}
});
// the root view model
var app = new Vue({
el: '#app',
data: {
'IsAnyCheckboxChecked': false,
'ColorList': [
{
'Text': 'Red',
'Answer': true
},
{
'Text': 'Blue',
'Answer': false
},
{
'Text': 'Green',
'Answer': false
}
]
}
});
use $refs for accessing the child directly. Inside a v-for ref becomes and array. since your v-for is based on this.color.length anyway use the same thing to loop though the value in the $ref var.
https://jsfiddle.net/goofballtech/a6Lu4750/19/
<the-child ref="childThing" inline-template :color="element" :key="index" v-for="(element, index) in colors">
for (var i in this.colors) {
if (this.$refs.childThing[i].IsSelected) {
isAnyCheckboxChecked = true;
break;
}
}
这篇关于Vue 父组件访问子组件的计算属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!