Truyền sự kiện và đối số cho v-on trong Vue.js

158

Tôi vượt qua một tham số trong v-on:inputchỉ thị. Nếu tôi không vượt qua nó, tôi có thể truy cập sự kiện trong phương thức. Có cách nào tôi vẫn có thể truy cập sự kiện khi truyền tham số cho hàm. Không phải là tôi đang sử dụng vue-router:

Điều này là không thông qua tham số. Tôi có thể truy cập đối tượng sự kiện

HTML

<input type="number" v-on:input="addToCart" min="0" placeholder="0">

Javascript

  methods: {
    addToCart: function (event) {

      // I need to access the element by using event.target
      console.log('In addToCart')
      console.log(event.target)
    }
  }

Đây là khi truyền tham số. Tôi không thể truy cập đối tượng sự kiện

HTML

<input type="number" v-on:input="addToCart(ticket.id)" min="0" placeholder="0">

Javascript

  methods: {
    addToCart: function (id) {

      // How can I access the element by using event
      console.log('In addToCart')
      console.log(id)
    }
  }

Đây là một số đoạn mã, nên đủ tốt để tái tạo vấn đề mà tôi đang gặp phải

https://jsfiddle.net/lookman/vdhwkrmq/

vue.js

— tắc kè
nguồn

Câu trả lời:

241

Nếu bạn muốn truy cập đối tượng sự kiện cũng như dữ liệu được truyền, bạn phải vượt qua eventvà ticket.idcả hai dưới dạng tham số, như sau:

HTML

<input type="number" v-on:input="addToCart($event, ticket.id)" min="0" placeholder="0">

Javascript

methods: {
  addToCart: function (event, id) {
    // use event here as well as id
    console.log('In addToCart')
    console.log(id)
  }
}

Xem fiddle làm việc: https://jsfiddle.net/nee5nszL/

Đã chỉnh sửa: trường hợp với vue-router

Trong trường hợp bạn đang sử dụng vue-router, bạn có thể phải sử dụng $ event trong v-on:inputphương thức của mình như sau:

<input type="number" v-on:input="addToCart($event, num)" min="0" placeholder="0">

Đây là fiddle làm việc .

— Saurabh
nguồn

Tôi đã thử nhưng tôi nhận được thông báo lỗi

Property or method "event" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option

— geckob

@geckob bạn đã vượt qua sự kiện từ HTML : v-on:input?

— Saurabh

Không chắc điều này có liên quan hay không, nhưng tôi đang sử dụng vue-router và điều này xảy ra ở một trong những phần

— con tắc kè

@Saurabh @geckob Để tránh lỗi, bạn cần chuyển $eventbiến đặc biệt cho lệnh gọi phương thứcv-on:input="addToCart($event, num)"

— williamukoh

Bạn nên vượt qua $event, khôngevent

— Michael Tranchida

Bạn cũng có thể làm một cái gì đó như thế này ...

<input @input="myHandler('foo', 'bar', ...arguments)">

Evan Bạn tự đề xuất kỹ thuật này trong một bài đăng trên diễn đàn Vue. Nói chung một số sự kiện có thể phát ra nhiều hơn một đối số. Cũng như tài liệu nêu rõ biến nội bộ $ event có nghĩa là để truyền sự kiện DOM gốc.

— xpuu
nguồn

jsfiddle.net/50wL7mdz/30115 Lưu ý cú pháp lây lan sẽ được phiên mã khi sử dụng các thành phần * .vue, nhưng không phải nếu bạn sử dụng trình biên dịch trong trình duyệt.

— Илья Зеленько

có sự khác biệt giữa "... đối số" và "$ event" không?

— Raphael

@Raphael Có một sự khác biệt! Với đối số "$ event", bạn chỉ truyền một đối số từ sự kiện.

— Piotr Dawidiuk

Tùy thuộc vào những đối số bạn cần vượt qua, đặc biệt đối với các trình xử lý sự kiện tùy chỉnh, bạn có thể thực hiện một số thứ như thế này:

<div @customEvent='(arg1) => myCallback(arg1, arg2)'>Hello!</div>

— jasonlfunk
nguồn