当用户单击 bootstrap-selectpicker 选项时，使用 Vue 如何调用函数

Question

当用户单击一个选项时，我在 vue 组件中有多个选择器我想调用一个传入 id 的函数

<tr v-for="(content) in searchResults" v-bind:key="content.id">
   <td>{{ content.title}}</td>
    <td>
        <select class="selectpicker">
            <option value="" selected disabled>Select Option</option>
            <option value="Reject" @v-on:click="rejectArticle(content.id)">Reject</option>
            <option value="Preview" @v-on:click="previewArticle(content.id)">Preview</option>
            <option value="Approve" @v-on:click="approveArticle(content.id)">Approve</option>
        </select>
    </td>
</tr>

然而这是错误的。完成此任务的正确方法是什么？

Answer 1

我认为最简单的方法是使用@change，如回复中所述，这就是它的样子模板：@change="onChange($event, content.id)"

在处理程序中，您可以使用 event.target.value

访问该值

new Vue({
  el: "#app",
  data: { searchResults:[{id:1, title:'ABC'}, {id:2, title:'DEF'}] },
  methods: {
   onChange(event, id) {
      console.log(event.target.value, id)
      switch (event.target.value) {
        case rejectArticle:
          this.rejectArticle(id)
          break;

        case previewArticle:
          this.previewArticle(id)
          break;

        case approveArticle:
          this.approveArticle(id)
          break;

        default:
          break;
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
 <table>
  <tr v-for="(content) in searchResults" v-bind:key="content.id">
     <td>{{ content.title}}</td>
      <td>
          <select class="selectpicker" @change="onChange($event, content.id)">
              <option value="" selected disabled>Select Option</option>
              <option value="Reject">Reject</option>
              <option value="Preview">Preview</option>
              <option value="Approve">Approve</option>
          </select>
      </td>
  </tr>
 </table>
 </div>

当用户单击 bootstrap-selectpicker 选项时，使用 Vue 如何调用函数

Using Vue how do you call a function when a user clicks on a bootstrap-selectpicker option

javascript

bootstrap-selectpicker

vuejs2