In my project, I am using VueJS and FabricJS to create a dynamic canvas that changes size based on user input. The goal is to have the canvas adjust its dimensions as soon as the user enters new values in the sidebar component.
Despite using $emit from child to parent components, I am facing an issue where the canvas size does not update as intended.
CustomSideBar.vue
<template>
<div class="control-bar">
<b-sidebar position="static" open >
<b-menu-list>
<b-menu-item label="Height">
<b-field>
<b-input v-model="height" maxlength="5" @change="emitHeight()"></b-input>
</b-field>
</b-menu-item>
<b-menu-item>
<b-field>
<b-input v-model="width" maxlength="5" @change="emitWidth()"></b-input>
</b-field>
</b-menu-item>
</b-menu-list>
</b-sidebar>
</div>
</template>
<script>
export default {
data() {
return {
width: '640',
height: '480',
}
},
methods: {
emitWidth() {
this.$emit('changeWidth', this.width)
},
emitHeight() {
this.$emit('changeHeight', this.height)
}
},
}
</script>
CustomCanvas.vue
<template>
<div class="columns">
<section class="section canvas-section column auto">
<CustomSideBar @changeWidth="widthChange($event)" @changeHeight="heightChange($event)" />
</section>
<section class="section canvas-section column is-10 canvas-column">
<canvas class="canvas" ref="can"></canvas>
</section>
</div>
</template>
<script>
import {fabric } from 'fabric'
import CustomSideBar from '../components/CustomSideBar.vue'
export default {
data() {
return {
canvasHeight: '480',
canvasWidth: '640',
canvas: null
}
},
components: {
CustomSideBar
},
methods: {
heightChange (height) {
this.canvasHeight = height;
this.canvas.setHeight = this.canvasHeight;
},
widthChange (width) {
this.canvasWidth = width;
this.canvas.setWidth = this.canvasWidth;
}
},
mounted() {
const ref = this.$refs.can;
this.canvas = new fabric.Canvas(ref);
}
}
</script>
<style scoped>
.canvas-column {
width: 100%;
height: 100%;
background-color: lightgrey;
text-align: center;
}
.canvas {
border: 1px solid darkgrey;
margin-left: auto;
margin-right: auto;
}
.canvas-section {
padding: 0;
}
</style>