Vue.JS组件prop无法传递给JavaScript函数触发jQuery toggle失效问题

核心错误点 #

• 你使用了原生onclick绑定事件，原生事件的this指向触发事件的<button> DOM元素，而非Vue组件实例，因此this.idValue读取的是DOM元素的自定义属性，不是组件接收的idValue prop，自然无法拿到正确值。
• 原生onclick运行在全局作用域，和Vue组件的上下文完全隔离，就算写对属性名也无法访问Vue组件内部的prop、data等数据。

修复方案 #

方案1：替换为Vue事件绑定（最快适配现有代码） #

把按钮的原生onclick改成Vue的@click事件绑定，直接传入idValue prop即可，无需加this（Vue模板内可直接访问组件上下文的属性）：

<button @click="toggleListShow(idValue)">x</button>

注：如果你的toggleListShow是全局定义的函数，直接按上述写法调用即可正常传参。

方案2：封装组件内部方法（更符合Vue规范） #

如果怕全局函数调用有上下文问题，可以在组件内加一层methods包装：

1. 给组件添加methods配置：

props: {'obraName': String, 'idValue': String},
methods: {
  toggleShow() {
    // 明确调用全局挂载的jQuery方法
    window.toggleListShow(this.idValue)
  }
}

2. 修改按钮绑定：

<button @click="toggleShow">x</button>

可选优化建议 #

如果不需要兼容老的jQuery逻辑，可以完全用Vue的v-show实现显隐，无需依赖全局id匹配和jQuery：

<div :style="style">
  <label :style="text">{{obraName}}</label>
  <button @click="isShow = !isShow">x</button> 
  <div :style="text" v-show="isShow"><slot></slot></div>
</div>

同时给组件加个内部状态：

data() {
  return {
    isShow: true
  }
}

内容的提问来源于stack exchange，提问作者Tupi