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

Question

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

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