HTML 按钮在 Vue.js 中的 v-for 循环中重复，class 按钮对附加的 jQuery 事件处理程序不起作用

Question

我正在使用 jQuery 插件，它要求我将事件绑定到按钮上的 class。

按钮在 table 中重复，如下所示：

<tr v-for="option in app.options">
  <td>{{ option.value1 }}</td>
  <td>{{ option.value2 }}</td>
  <td><button class="btn btn-primary next">Choose</button></td>
</tr>

但是，当它呈现选项（开始时未设置，它们是通过 http 请求设置的）并且单击按钮时，jQuery 事件未在按钮，即使它附有 next class。

如何让 jQuery 识别由 Vue.js 呈现的带有 .next class 的按钮？

Answer 1

正如其他答案所述，它可能没有注册事件，因为此时 next 按钮不存在。我会使用 vue 指令在您的组件上调用一个方法，然后在该方法中手动触发 jquery 事件。所以你的按钮是 <td><button class="btn btn-primary next" v-on:click="fireJqueryEvent">Choose</button></td>

然后在你的 Vue 组件中：

methods:{
    fireJqueryEvent(e){
        //run the function you need to run or use .trigger() to fire an event
    }
}

您也可以等到 Vuejs 内容加载完毕后再调用 jquery 向导。

HTML 按钮在 Vue.js 中的 v-for 循环中重复，class 按钮对附加的 jQuery 事件处理程序不起作用

HTML button repeating in v-for loop in Vue.js, class on button not working to attached jQuery event handler

javascript

vue.js