vue.js - Computed property based on child components -
is possible create computed property relies on child components data? seems trivial task can't figure out...
foo component
<template> {{ foo }} </template> <script> export default { computed: { foo() { return math.random() } } } </script>
parent component
<template> foo computed property sum: {{ sum }} <foo v-for="n in 10"></foo> </template> export default { computed: { sum() { // return...? } } } </script>
you can, it's pretty unusual approach things, it's not best choice whatever you're trying achieve.
instead, might keep data in parent , pass component prop. if use value
prop name, can nice clean syntax v-model
. (you have use foos[index]
due fact you can't v-model
alias, in case you're generating index anyway).
new vue({ el: '#app', data: { foos: [] }, computed: { sum() { return this.foos.reduce((a, b) => + b, 0); } }, components: { foo: { template: '<div>{{ value }} <button @click="reroll">change it</button></div>', props: ['value'], created() { this.reroll(); }, methods: { reroll() { this.$emit('input', math.floor(math.random() * 10)); } } } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="app"> foo computed property sum: {{ sum }} <foo v-for="index in 10" v-model="foos[index]"></foo> </div>
Comments
Post a Comment