As a beginner in Vue.js, I decided to practice using Fabric.js and Vue.js. My goal was to make my canvas reactive by utilizing Vue.js, but unfortunately, nothing seemed to happen. The default display in the canvas was "Text". However, after clicking a button, that text should change to "Test bus". But for some reason, the text in the canvas did not change.
main.js
import Vue from 'vue'
import App from './App.vue'
import { fabric } from 'fabric'
import { eventBus } from './bus';
var vm = new Vue({
el: '#app',
data: {
showText: 'Test'
},
render: h => h(App),
mounted() {
var canvas = new fabric.Canvas('canvas', {
width: 500,
height: 500
});
eventBus.$on('grabData', (gg) => {
this.showText = gg;
});
var addtext = new fabric.Textbox(this.showText, {
left: 200,
top: 200,
fill: "#A7A9AC",
strokeWidth: 2,
fontFamily: 'Arial'
});
canvas.add(addtext);
canvas.renderAll();
}
});
bus.js
import Vue from 'vue';
export const eventBus = new Vue();
App.vue
<template>
<div id="app">
<canvas id="canvas" :style="myStyle"></canvas>
<button @click="changeName()">Change</button>
</div>
</template>
<script>
import { eventBus } from './bus';
export default {
name: 'app',
data () {
return {
}
},
methods: {
changeName() {
eventBus.$emit('grabData', "Test bus");
}
},
computed: {
myStyle() {
return {
border: '1px solid black'
}
}
}
}
</script>
In the main.js file, there is a default text set as "Test" for the showText variable. This value gets changed via the event bus through App.vue. The App.vue file contains a button that triggers the change of the showText value. However, despite the value changing in the showText variable, it does not reflect in the canvas.