前端中的$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，問題也就解決了！