Use $emit inside an click function

Question

I am trying to get input values in an editSwatch Vue method which has a click function to collect them when altered. In this I get an error that $emit is not a function, and when I try to put them in the main method, it is not getting the values. The original methods are getName and setbgColor in the main methods block, I am trying to use them inside this function to get values specific to the item being edited. Code is below:

// Copy individual swatch to main div for re-editing
editSwatch() {
    let mainDiv = document.getElementById('bodybg');
    let smallDiv = document.querySelector("#bg-gradient > .bg-gradient");
    document.querySelector('#bg-gradient > .bg-gradient').setAttribute("id", "gradient");
    mainDiv.style.backgroundImage = smallDiv.style.backgroundImage;
    let pubBtn = document.getElementById('pubBtn');
    pubBtn.style.display = "none";
    Vue.swal('Reset Values and Save The Edit');
    document.getElementById('saveBtn').addEventListener('click', function () {
        // Get/Set bg and gradient values
        let bg = document.getElementById('bodybg');
        smallDiv = document.querySelector('#bg-gradient > #gradient');
        let textDiv = document.querySelector('#bg-gradient > #info');
        smallDiv.style.backgroundImage = bg.style.backgroundImage;
        textDiv.innerHTML = "";
        //textDiv.innerHTML = `<h5>${name}</h5><p>${hexValues}</p>`;
        Vue.swal('Swatch Edited!');
    });
}

and the original $emit methods are

 this.$emit('input', {
  value1: +this.value1,
  value2: +this.value2,
  value3: +this.value3
 });

But cant seem to use them in above, I need to get the values which are specific to the swatch being edited.

Anyone know how to do it?

Thanks.

Answer 1

Solved this with a combination of comments below, changed the global getters/ $emits to return the values:

 // Get the name value
    getName() {
      this.$emit('input', {
      value3: +this.value3
      });
      return this.value3;
   },
    // Get bg gradient values
    getbgColor() {
      this.$emit('input', {
      value1: +this.value1,
      value2: +this.value2,
      });
      return this.value1, this.value2;
    },

Then used arrow function on click handler to make it a Vue instance, and got the values correctly.

document.getElementById('saveBtn').addEventListener('click', () => {
let hexValues = `${this.value1}, ${this.value2}`;
let name = (`${this.value3}`);
console.log(name);
console.log(hexValues);
}

Thanks