Creating a root computed value from component computed values? - vue.js

Question

I'm somewhat new to Vue and I'm trying to figure out how to access computed values from components' computed values.
Please check out this Fiddle: https://jsfiddle.net/85ma3rct/
<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>
<floor></floor>
<floor></floor>
<floor></floor>
</table>
Largest area: {{ largest_area}}
</div>
Vue.component('floor', {
data: function () {
return {
width: 20,
height: 20
}
},
computed: {
area: function () {
return this.width * this.height;
}
},
template: '<tr><td><input type="number" v-model="width"></td>' +
'<td><input type="number" v-model="height"></td>' +
'<td>{{ area }}</td>' +
'</tr>'
})
new Vue({
el: '#app',
computed: {
largest_area: function () {
// How to get this from component computed values...
return 0
}
},
})
How could I get the largest_area computed value by the computed value from within a number of components?

Answer 1

One possible solution is watching for area value changes in child component and emit value to parent
watch: {
area: {
handler() {
this.$emit('input', this.area)
},
immediate: true
}
},
then in parent
<table>
<floor #input="changeVal($event, 0)"></floor>
<floor #input="changeVal($event, 1)"></floor>
<floor #input="changeVal($event, 2)"></floor>
</table>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
areas: [0, 0, 0]
},
computed: {
largest_area: function () {
return Math.max(...this.areas)
}
},
methods: {
changeVal(val, index) {
this.$set(this.areas, index, val)
}
}
})
Demo here https://jsfiddle.net/ittus/kuo9crjm/1/

Answer 2

You can use $refs for this Refer - Refs
Add a ref to your component wherever you import it and use it -
<MyComponent ref="child" />
Then you can access all it's property from your consuming component.
In your consuming component you can access it in $refs property like below
this.$refs.child.{child-property}
Add ref to floor
<table>
<floor ref="floor"></floor>
</table>
And then refer it
new Vue({
el: '#app',
computed: {
largest_area: function () {
console.log(this.$refs.floor.area())
return 0
}
},
})

Answer 3

You can turn your <floor> components into custom elements that can use v-model. Each <floor> can then emit the computed area to its parent which can collect and compute the maximum.
For example
Vue.component('floor', {
template: `<tr>
<td><input type="number" v-model="width" #input="update"></td>
<td><input type="number" v-model="height" #input="update"></td>
<td>{{ area }}</td>
</tr>`,
data: () => ({ width: 20, height: 20 }),
computed: {
area() { return this.width * this.height }
},
methods: {
update() { this.$emit('input', this.area) }
},
created() { this.update() } // emit the initial value
})
new Vue({
el: '#app',
data: { areas: [0, 0, 0] },
computed: {
largest_area () { return Math.max(...this.areas) }
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.min.js"></script>
<div id="app">
<table>
<floor v-for="(_, n) in areas" v-model="areas[n]" :key="n"></floor>
</table>
Largest area: {{ largest_area }}
</div>
Typically, to support v-model, your component would have a value prop. However, since your components initialise their own data, I have omitted that. The only real requirement is that your component emit an input event.