使用 Vue 当用户单击引导选择器选项时如何调用函数答案

【问题标题】：Using Vue how do you call a function when a user clicks on a bootstrap-selectpicker option使用 Vue 当用户单击引导选择器选项时如何调用函数
【发布时间】：2020-03-16 06:53:24
【问题描述】：

当用户点击一个选项时，我在一个 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>

但是这是错误的。实现此目的的正确方法是什么？

【问题讨论】：

可能使用了select的onchange，类似这样？ stackoverflow.com/questions/50982408/…

标签： javascript vuejs2 bootstrap-selectpicker

【解决方案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>

【讨论】：