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

Posted 2023-02-22

【中文标题】使用 Vue 当用户单击引导选择器选项时如何调用函数

【英文标题】：Using Vue how do you call a function when a user clicks on a bootstrap-selectpicker option

【发布时间】：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，类似这样？ ***.com/questions/50982408/…

【参考方案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>