//検知 computed: { template() { return this.template } },
//データ data() { return { template: { id: 1, width: 400, height: 500, layers: [ {id: 1, value: "doragon"}, {id: 2, value: "neko"}, {id: 3, value: "inu"}, {id: 4, value: "usagi"}, ], }, } },
この様な処理の時に例えば別の関数で
setLayers(layer) { this.template.layers.push(layer) }
template
の中のlayers
の中で変更が起きてもこの書き方のcomputed
では変更が起きません。
どうすればオブジェクトの中の値変更までcomputed
で検知してくれる様な処理にできますか?
#追記
自分の実装載せます。
//親コンポーネント <template> <div class="create"> <Preview :tmp_template="template"/> <image :tmp_template="template" v-model="template" @setTmpTemplate="setTemplate"/> </div> </template> <script> export default { components: { Preview: () => import('@/components/preview.vue'), Image: () => import('@/components/image.vue'), }, data() { return { template: { id: "", width: 0, height: 0, layers: [], }, } }, methods: { setTemplate(template) { this.template = template }, }, } </script>
親コンポーネントでcomputed
で検知するデータを作成しています。
//子コンポーネント //Image.vue <template> <div> <div v-for="image in layer"> <el-input v-model="image.value"></el-input> </div> </div> </template> <script> export default { props: ['tmp_template'], computed: { layer() { return this.tmp_template.layers.filter(function (layer) { if(layer.type === 'image') { console.log(layer) return layer } }) } }, } </script>
image.vue
でObject
の一番下のネストの値を変更しています。
//子コンポーネント //preview.vue <script> export default { props: ['tmp_template'], mounted() { this.ctx = this.$el.firstChild.firstElementChild.getContext('2d') this.drawCreative() }, computed: { template() { return this.tmp_template } }, watch: { template(val) { this.drawCreative() } }, methods: { drawCreative() { this.ctx.canvas.width = this.tmp_template.width this.ctx.canvas.height = this.tmp_template.height this.tmp_template.layers.forEach(layer => { this.ctx.fillText(layer.value, layer.x_position, layer.y_position - -10) }); }, }, } </script>
別の子コンポーネントでimage.vue
で入力して値変更されたtmp_template
を監視しているのですが、検知されません。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。