Ở bài trước mình đang xử lý logic count number trong mã HTML của mình và nó nằm trong phần điều kiển của Vue nhưng trong mã HTML, nếu chúng ta làm theo cách này nó là một phương pháp không tốt, không tối ưu.

<section id="event">
  <button v-on="count++">Add</button>
  <button v-on:click="count = count - 1">Reduce</button>
  <p>Count: {{ count }}</p>
</section>

Bạn không muốn đặt quá nhiều logic vào mã HTML của mình. Thay vào đó, mã HTML thực sự chỉ nên dùng để xuất nội dung. Logic như thế này, mặc dù nó không quá phức tạp, nhưng thường sẽ được xử lý trong Vue.

Bây giờ làm thế nào chúng ta có thể đưa logic này vào trong Vue? Bài này sẽ giúp các bạn kết hợp Event binding và methods để chúng ta có thể giải quyết vấn đề này để nó trở nên tối ưu hơn.

Chúng ta sẽ sửa đoạn code thành như sau:

Thêm 2 hàm "add" và "reduce" trong trong đối tượng methods, và chúng ta sẽ xử lý logic trong 2 hàm này, sau đó gọi 2 hàm này trong directive v-on.

const app = Vue.createApp({
    data() {
        return {
            count: 0
        }
    },
    methods: {
        add() {
            this.count = this.count + 1;
        },
        reduce() {
            this.count = this.count - 1;
        }
    },
})
app.mount('#event');

<section id="event">
  <button v-on:click="add">Add</button>
  <button v-on:click="reduce">Reduce</button>
  <p>Count: {{ count }}</p>
</section> 

Bằng cách này, khi sự kiện click được kích hoạt, Vue.js sẽ gọi phương thức "add" đã được định nghĩa trong phần methods của Vue instance. Điều này giúp cho mã nguồn của bạn trở nên gọn gàng và dễ bảo trì.

Có thể bạn chưa biết , chúng ta có thể gọi tên phương thức trong directive v-on bằng 2 cách:

<section id="event">
  <button v-on:click="add">Add</button>
  <button v-on:click="reduce">Reduce</button>
  <p>Count: {{ count }}</p>
</section> 

Hoặc:

<section id="event">
  <button v-on:click="add()">Add</button>
  <button v-on:click="reduce()">Reduce</button>
  <p>Count: {{ count }}</p>
</section> 

Ở ví dụ trên chúng ta không truyền tham (paramaters) số vào hàm, vậy trong trường hợp nếu chúng ta cần truyền tham số thì chúng ta sẽ phải làm như thế nào? 

Dưới đây là cách truyền tham số vào các phương thức xử lý sự kiện trong Vue.js:

<button @click="handleClick('parameter')">Click here</button>

Trong ví dụ này, 'parameter' là tham số được truyền vào phương thức handleClick khi sự kiện click xảy ra.

Trong phần methods của Vue instance, phương thức handleClick có thể nhận tham số như sau:

new Vue({
  el: '#app',
  data: {
    // Dữ liệu của Vue instance
  },
  methods: {
    handleClick(parameter) {
      // Xử lý khi click vào nút, sử dụng tham số parameter
      console.log(parameter); // parameter sẽ là 'parameter'
    }
  }
});

Trong Vue.js, ngoài việc truyền tham số trực tiếp vào các phương thức xử lý sự kiện, bạn cũng có thể sử dụng các biến hoặc thuộc tính đã được định nghĩa trong dữ liệu của Vue instance. Điều này giúp bạn truy cập và sử dụng dữ liệu trong các phương thức của bạn một cách linh hoạt.

Dưới đây là một ví dụ về cách sử dụng các biến hoặc thuộc tính trong phương thức xử lý sự kiện trong Vue.js:

<button @click="handleClick">Click here</button>

new Vue({
  el: '#app',
  data: {
    // Dữ liệu của Vue instance
    parameter: 'parameter from data'
  },
  methods: {
    handleClick() {
      //Xử lý khi click vào nút, sử dụng tham số parameter
      console.log(parameter); // parameter sẽ là 'parameter'
    }
  }
});