javascript - HTML 按钮在 Vue.js 中的 v-for 循环中重复，按钮上的类不适用于附加的 jQuery 事件处理程序

Question

我正在使用一个 jQuery 插件，它要求我将事件绑定(bind)到按钮上的类。

该按钮在表格中重复出现，如下所示:

<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 类。

当 Vue.js 渲染按钮时，如何让 jQuery 识别带有 .next 类的按钮？

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 向导。