如何在javascript中为事件发送2个参数

Posted 2023-02-22

【中文标题】如何在javascript中为事件发送2个参数

【英文标题】：How to send 2 params for event in javascript

【发布时间】：2020-02-23 12:38:04

【问题描述】：

我有点困惑如何在 javascript、vuejs 中发送 2 个用于事件监听的参数。我正在尝试在 keyup===13(enter) 事件时编辑输入数据，但我不知道如何发送带有该值的事件..当我发送 2 个参数时，它一直说事件不是函数。

所以我为每个事件监听创建了 2 个方法。 1. 点击 ：获取每本书的列表 2. keyup===13 : 保存数据

任何想法..？如何在 1 中处理这个问题？

数据

let books = new Map();
books.set('1910', 
    'park':  userName: 'park', bookTitle: 'book1', bookThumbnail: 'book1', bookUrl: 'book1' ,
    'ryu':  userName: 'ryu', bookTitle: 'book2', bookThumbnail: 'book2', bookUrl: 'book2' ,
    'lee':  userName: 'lee', bookTitle: 'book3', bookThumbnail: 'book3', bookUrl: 'book3' 
)

BookMain 组件

<template>
  <v-container>
...
  <tbody>
          <tr v-for="book in books" :key="book.userName" :class="setCss.textAlign">
            <td>book.userName</td>
            <td>
              <input type="text" :value="book.bookTitle" @click="getUser(book)" @keyup="save" />
            </td>
            <td>book.bookThumbnail</td>
            <td>book.bookUrl</td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>
  </v-container>
</template>

脚本

  computed: 
    books: function() 
      let books = this.$store.getters.getBooks;
      let month = this.date;

      let a = books.get(month);

      return a;
    
  ,

方法

  methods: 
    save: function(event) 
      event.preventDefault();

      if (event.keyCode === 13) 
        console.log(1);

      

    ,

    getUser: function(book) 
      //   console.log(book);

      var editedUsername = book.userName;
      var editedBookTitle = event.target.value;
      var editeBookThumbnail = book.bookThumbnail;
      var editedBookUrl = book.bookUrl;

      var item = new Object();
      item.userName = editedUsername;
      item.bookTitle = editedBookTitle;
      item.bookThumbnail = editeBookThumbnail;
      item.bookUrl = editedBookUrl;

      console.log(item);
      return item;
    
  

【参考方案1】：

基于this answer。如果您想在 getUser 方法中获取事件，请在绑定中使用 $event。像这样：

<td>
  <input type="text" :value="book.bookTitle" @click="getUser(book, $event)" @keyup="save" />
</td>

【参考方案2】：

new Vue(
  el: '#app',
  data() 
    return 
      book: 
        bookTitle: 'title'
      
    
  ,
  methods: 
    getUser(e, book) 
      console.log(book);
    
  
)

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

<div id="app">
  <input type="button" :value="book.bookTitle" @click="getUser($event,book)" />
</div>