前端中的$event

前端中的$event

作用：可以通过$event进行对dom元素的获取,比如说mouseEvent

比如说我的问题是要获取输入框的值以及输入框所在的item

<a-menu theme="light" style="width: 256px"  >
  <a-menu-item
    class="menu-item-wrap"
    v-for="item in groupList"
    :key="item.id"
    @click="handleGroupClick(item)">
    <div v-if="item.inputVisible===true">
      <a-icon :type="item.icon" />
      <a-input type="text"
               :onfocus="true"
               class="input-wrap"
               :placeholder="item.name"
               :value="inputValue"
               @blur="changeGroupName($event, item)"
               @keyup.enter="changeGroupName($event, item)"/>
    </div>
    <div v-else>
      <a-icon :type="item.icon" />
      {{item.name}}
    </div>
    <div>{{item.num}}</div>
  </a-menu-item>

changeGroupName (e, item) {
  const value = e.target.value
  if (!value) return
  item.name = value
  item.inputVisible = false // 改变显示状态
}

大概思路是，item中有一个input框，我本来就传了一个item,获取到input输入的值并赋值给item.name,以为结果没有变化，还用了$set方法进行刷新数据，结果还是没有变化，然后输出item的值发现根本没有赋值，经过检查发现是menu中item的根本就没获取到，所以赋的值相当于创建了一个新的变量，跟我的点击的item一毛关系没有，最后采用changeGroupName($event, item)这样的传值方法得到了item和input的value，问题也就解决了！