在Vue.js中，如何在选择所显示的元素时，如何在选择时将事件射击？

Posted 2023-02-16

【中文标题】在Vue.js中，如何在选择所显示的元素时，如何在选择时将事件射击？

【英文标题】：In Vue.js, how can I get an event to fire in a select when the displayed element is chosen?

【发布时间】：2019-12-03 07:25:03

【问题描述】：

这是一个小提琴示例：

https://jsfiddle.net/40fxcuqd/

最初，它显示“Carl”

如果我选择 Carol、Clara 等，则会触发一个事件并将数据打印到控制台。

但如果我单击下拉菜单并选择“Carl”，则不会触发任何事件，也不会向控制台打印任何内容。

我使用的事件是@input:

<select v-model="selectedPerson" @input="myEvent()">

如何在每次选择某项时触发一个事件，即使它的值相同？

编辑：

澄清一下，最初选择“Carl”时：

然后下拉菜单打开：

然后再次选择 Carl，我希望触发一个事件并打印到控制台。我目前的问题是没有触发任何事件，并且没有任何内容打印到控制台。

【问题讨论】：

我在 Chrome 和 Firefox 中试过，对我来说效果很好。 也许您可以将事件更改为@change 以获取新的选定数据。

【参考方案1】：

真的很老套，但能胜任，我用过@click 和event.detail 或event.which：

new Vue(
  el: '#app',
  template: `
        <div>
            <select v-model="selectedPerson" @input="myEvent($event)" @click="myEvent($event)">
                <option v-for="person in people" :value="person.key" :selected="person.key == selectedPerson">person.name</option>
            </select>
        </div>
    `,
  data: 
    people: [
        key: 1,
        name: "Carl"
      ,
      
        key: 2,
        name: "Carol"
      ,
      
        key: 3,
        name: "Clara"
      ,
      
        key: 4,
        name: "John"
      ,
      
        key: 5,
        name: "Jacob"
      ,
      
        key: 6,
        name: "Mark"
      ,
      
        key: 7,
        name: "Steve"
      
    ],
    selectedPerson: 1
  ,
  methods: 
    myEvent: function(e) 
      if (e.detail == 0)//if (e.which == 0)
        console.log(e.type, this.selectedPerson);
    
  
);

body 
  margin: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;


.as-console-wrapper 
  height: 39px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app"></div>

使用数据的一种不那么老套的方式：

new Vue(
  el: '#app',
  template: `
        <div>
            <select v-model="selectedPerson" @input="myEvent($event)" @click="myEvent($event)">
                <option v-for="person in people" :value="person.key" :selected="person.key == selectedPerson">person.name</option>
            </select>
        </div>
    `,
  data: 
    people: [
        key: 1,
        name: "Carl"
      ,
      
        key: 2,
        name: "Carol"
      ,
      
        key: 3,
        name: "Clara"
      ,
      
        key: 4,
        name: "John"
      ,
      
        key: 5,
        name: "Jacob"
      ,
      
        key: 6,
        name: "Mark"
      ,
      
        key: 7,
        name: "Steve"
      
    ],
    selectedPerson: 1,
    prev: 0,
    isChanged: false
  ,
  methods: 
    myEvent: function(e) 
      if (e.type == "input" || (e.type == "click" && !this.isChanged && (this.prev == this.selectedPerson || this.prev == 0))) 
        this.isChanged = true;
        this.prev = 0;
       else if (e.type == "click" && this.isChanged) 
        console.log(e.type, this.selectedPerson);
        this.prev = this.selectedPerson;
        this.isChanged = false;
      
    
  
);

body 
  margin: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;


.as-console-wrapper 
  height: 39px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app"></div>

【讨论】：

代码在有或没有@input="myEvent($event)" 的情况下都有效。请确认。另外，我不确定e.which 是如何在这里完成这项工作的。另外，似乎e.which 是non standard 应该在答案中提及。

是的，它可以在没有 input 事件的情况下工作，但 OP 在问题中有它，所以我将它包括在内

e.which 是MouseEvent 中唯一的属性，我可以利用它来获得点击在select 和option 之间进行区分的结果，将包括您提到的所有内容在答案中:)

e.which 是如何做到的呢？我以为数字 0 意味着它是左键单击？这有什么区别？

@RashadSaleh UIEvent.detail 具有相同的行为

【参考方案2】：

一种解决方法是在焦点时将 selected 设置为未使用的值，然后无论选择哪个选项都会触发 change 事件。

<select 
    v-model="selectedPerson" 
    ref="s" 
    @focus="selectedPerson = 0" 
    @change="myEvent()"
>

见小提琴：https://jsfiddle.net/tne1wp3q/

虽然它并不完美，每次点击都会触发 change 事件多次，如果没有选择任何选项，它可能会留空。需要更多代码来过滤这些行为。

【参考方案3】：

这是因为默认选择的选项是 1，那么当你点击 Carl 时没有任何变化，你必须使用 @change 事件，如果你想在点击时获取 Carl 值，应该在选择选项上使用占位符。

new Vue(
    el: '#app',
    template: `
        <div>
            <select v-model="selectedPerson" @change="myEvent()">
                <option :value="null" disabled hidden>Select option</option>
                <option v-for="person in people" :value="person.key" :selected="person.key == selectedPerson">person.name</option>
            </select>
        </div>
    `,
    data: 
        people: [
            key: 1, name: "Carl",
            key: 2, name: "Carol",
            key: 3, name: "Clara",
            key: 4, name: "John",
            key: 5, name: "Jacob",
            key: 6, name: "Mark",
            key: 7, name: "Steve"
        ],
        selectedPerson: null
    ,
    methods: 
    myEvent: function() 
    console.log(this.selectedPerson);
    
    
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

【参考方案4】：

当您更改下拉列表时，您将获得人员数组的索引，您可以执行类似的操作来获取价值

    myEvent: function() 
    console.log(this.people[this.selectedPerson].name);
    
   

【讨论】：

公平地说，当我运行这个小提琴时，当我选择 Carl 时出现错误，或者给我的名字完全错误。