【记】vue3 + element-plus 项目中遇到的change、input事件取值为undefined的问题

如果了解高阶函数，那么就好解决了

<template #default='{row}'>
  <el-input v-model="name" @change="cq(row)"></el-input>
  <el-input v-model="name" @change="(e) => {ql(row, e)}"></el-input>
</template>

<script setup>
  import { ref } from 'vue'
  
  const name = ref('')

  const cq = (row) => {
    ruturn (e) => {
      console.log(e.target.value)
    }
  }
  
  const ql = (row, e) {
    console.log(e,target.value)
  }
</script>

• 以下是旧记录

<template #default='{row}'>
  <el-input v-model="name" @change="cq(val, row)"></el-input>
</template>

<script setup>
  import { ref } from 'vue'
  
  const name = ref('')

  const cq = (val，row) => {
    console.log(val);             // 关键在这里的输出，为undefined
  }
</script>

需求

在表格中，利用v-if做修改文本的操作。当用户输入完文本，离开输入框会直接更新文本。

而为了同时获得输入框文本和本行的数据，意求将val和row一同传入方法内更新。

如果直接传值的话，value的值是undefined【然而目前我还没发现我犯的低级错误】

后来经过好几个小时的摸索，发现是模板内@change绑定的方法后面写的括号，导致表单默认的值被覆盖，因此val的值为undefined

其实这里直接将输入框的v-model绑定成row.name，直接可以更新文本，不用通过方法【怎么说呢，我顿时无语了，hhhh】

但，如果真的需要将输入框的值和其他值传到方法中的话，只能通过两个方法分别传值，目前还不知道这样的操作有什么应用场景。