Javascript 在单击函数中使用$emit

我试图在editSwatch Vue方法中获取输入值，该方法具有单击功能，可在更改时收集这些值。在这里，我得到一个错误$emit不是一个函数，当我尝试将它们放在main方法中时，它没有得到值。最初的方法是主方法块中的getName和setbgColor，我试图在此函数中使用它们来获取特定于正在编辑的项的值。代码如下：

//将单个样例复制到主div以重新编辑
编辑样本（）{
让mainDiv=document.getElementById（'bodybg'）；
设smallDiv=document.querySelector（“#bg gradient>bg gradient”）；
document.querySelector（'#bg gradient>.bg gradient'）.setAttribute（“id”，“gradient”）；
mainDiv.style.backgroundImage=smallDiv.style.backgroundImage；
让pubBtn=document.getElementById（'pubBtn'）；
pubBtn.style.display=“无”；
Vue.swal（“重置值并保存编辑”）；
document.getElementById（'saveBtn'）。addEventListener（'click'，function（）{
//获取/设置bg和渐变值
设bg=document.getElementById（'bodybg'）；
smallDiv=document.querySelector（'bg gradient>#gradient'）；
设textDiv=document.querySelector（'bg gradient>#info'）；
smallDiv.style.backgroundImage=bg.style.backgroundImage；
textDiv.innerHTML=“”；
//textDiv.innerHTML=`${name}${hexValues}
`；
Vue.swal（'样本编辑！'）；
});
}

最初的$emit方法是

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

但似乎不能在上面使用它们，我需要获得特定于正在编辑的样例的值

有人知道怎么做吗

---

谢谢。

通过下面的注释组合解决了此问题，更改了全局getter/$emits以返回值：

 // 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;
    },

然后使用click handler上的箭头函数将其设置为Vue实例，并正确获取值

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

---

感谢

通过下面的注释组合解决了此问题，更改了全局getter/$emits以返回值：

 // 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;
    },

然后使用click handler上的箭头函数将其设置为Vue实例，并正确获取值

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

---

谢谢

您的

单击

处理程序没有绑定上下文。改为使用箭头函数，以便

此

为Vue实例。但是，您应该避免在Vue中进行DOM操作，因为如果重新渲染组件，这些更改将被删除。这似乎是唯一的方法，因为它是处理/编辑一行swache中单击的样例，收集新值，然后放回原来的位置。已经差不多完成了，但无法获得这些值、新名称和新颜色，用于此特定操作。否则，当第一次创建样例时，它们会在方法中全局收集，例如getName（）{//获取名称值this.$emit（'input'，{value3:+this.value3}）；返回this.value3；}，我现在已经更改了这些全局方法，因此可能可以在此函数中使用它们//获取名称值getName（）{this.$emit（'input'，{value3:+this.value3}）；返回this.value3；}，//Get bg gradient values getbgColor（）{this.$emit（'input'，{value1:+this.value1，value2:+this.value2，}）；返回this.value1，this.value2；}，让hexValues=

${this.value2}

；let name=（

${this.value3}

）；console.log（name）；console.log（hexValues）；这些是未定义的日志记录并使用此.getbgColor（）显示为非函数，这是正确的，它是一个$emit，它与这些注释组合在一起。感谢您的

单击

处理程序没有绑定上下文。请改用箭头函数，以便

此

为Vue实例。但是，您应该避免在Vue中操纵DOM，因为如果组件重新启动，这些更改将被清除Endeded。似乎是唯一的方法，因为它是处理/编辑一行Swache中单击的样例，收集新值，然后放回原来的位置。几乎完成了这项操作，但无法获得此特定操作的这些值、新名称和新颜色。否则，当首次创建样例时，它们将在方法中全局收集，例如sample getName（）{//获取名称值this.$emit（'input'，{value3:+this.value3}）；返回this.value3；}，我现在已经更改了这些全局方法，因此可能可以在此函数中使用它们//获取名称值getName（）{this.$emit（'input'，{value3:+this.value3}）；返回this.value3；}，//获取bg渐变值getbgColor（）{this.$emit（'input'，{value1:+this.value1，value2:+this.value2，}）；返回this.value1，this.value2；}，让hexValues=

${this.value2}

；让name=（

${this.value3}

）；console.log（名称）；console.log（hexValues）；这些是未定义的日志记录，使用它。getbgColor（）显示为非函数，这是真的，它是一个$emit，使用这些注释的组合来解决它，谢谢