Vue event's $event parameter = event value case

template

<el-table :data="dataList">
 <el-table-column label="id" prop="id"></el-table-column>
 <el-table-column label="name" prop="name">
 <template v-slot="props">
  <el-input-number
  :min="0"
  v-model="props.row.count"
  @change="updateProduct($event)"
  size="mini"
 ></el-input-number>
 </template>
 </el-table-column>
</el-table>

Script Section

export default {
 data() {
 return {
  dataList: [
  { id: 1, name: '001', count: 1 },
  { id: 2, name: '002', count: 2 },
  { id: 3, name: '003', count: 3 },
  ]
 }
 },
 methods: {
 updateProduct(value) {
  console.info(value)
 }
 }
}

Supplement: Vue learning notes: The role of $event object in events

In Vue, click events or other events can be added to the event to obtain the DOM of the tag element or modify the attributes of the tag, etc. The specific usage is as follows:

1. You can get the DOM element through $event

html:

<button data-get="Data button" @click="getRvent($event)">Get event object</button>

First, let's print the $event object to see what properties it has, as shown below

The srcElement is the current label element, and you can use this attribute to get the label element of the current click event.

For example, we can operate on the obtained elements, just like native js, as follows:

 // Get the event object e
 getRvent(e){
  console.log(e);
  e.srcElement.style.background="red";
 }

Before clicking:

After clicking:

2. In addition, we can also modify the properties of the tag itself, such as changing the text value of a button. At this time, we use the textContent under $event to modify it.

Before clicking the button:

After clicking the button:

3. We can also get the attribute value of the tag customization through $event, as follows:

HTML code:

<button data-get="Data button" @click="getRvent($event)">Get event object</button>

This button tag has a custom attribute data-get, at this time we can get it according to the attribute target.dataset.get of $event

You can print it on the console as follows:

In fact, sometimes we can use the attributes of the element itself to perform operations, abandon operations such as adding classes, reduce code redundancy, and refine the code.

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM. If there are any mistakes or incomplete considerations, please feel free to correct me.