How can I remove objects?

[kageori]

Hi. I'm new to Vue.js and I have a question.

I want to remove the selected image when the delete button is clicked. I found that it can be possible by adding canvas.getActiveObject().remove(); in raw JavaScript, but I cannot find the way to do the same thing in vue-fabric-wrapper.

I would be happy if you could give me some advice.

<template>
  <div id="app">
    <fabric-canvas>
      <fabric-circle :id="3"></fabric-circle>
       <fabric-image :id="'start'" :url="testUrl"></fabric-image>
        <div v-for="index in catCount" :key="'cat' + index">
          <fabric-image :id="'cat' + index" :url="catUrl"></fabric-image>
        </div>
        <div v-for="index in dogCount" :key="'dog' + index">
          <fabric-image :id="'dog' + index" :url="dogUrl"></fabric-image>
        </div>
    </fabric-canvas>
    <div>
      <button @click="addImg('cat')">Add Cat</button>
    </div>
    <div>
      <button @click="addImg('dog')">Add Dog</button>
    </div>
    <div>
      <button @click="removeImg()">Delete</button>
    </div>
  </div>
</template>

<script>
import vueFabricWrapper from "vue-fabric-wrapper";

export default {
  name: "App",
  components: {
    FabricCanvas: vueFabricWrapper.FabricCanvas,
    FabricCircle: vueFabricWrapper.FabricCircle,
    FabricImage: vueFabricWrapper.FabricImageFromURL
  },
  data(){
        return {
            canvas: null,
            dogCount: 0,
            catCount: 0,
            images:[],
            testUrl : "https://placehold.jp/150x150.png?text=test",
            dogUrl: "https://placehold.jp/200x200.png?text=dog",
            catUrl: "https://placehold.jp/300x300.png?text=cat"
        }
    }, 
    props: ['url'],
    methods: {
      addImg:function(imgName){  
        switch (imgName) {
          case 'dog':
            this.dogCount +=1;
            break;
          case 'cat':
            this.catCount +=1;
            break;
          default:
            break;
        }
        console.log("Added.");
    },
    removeImg: function(){
      // How can I write HERE?
      console.log("Removed.");
    }
  }
};
</script>

[casyalex]

Since fabric Object already data-bind to Vue Instance. In this case, you should modify dogCount and catCount to control delete