vue에서 항목을 클릭하는 방법

vue에서 항목을 클릭하는 방법

기본적인 걸 하려고 하는데 잘 모르겠어요.

드롭다운이 있습니다.

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>{{selectedItem}}</span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content" v-model="selectedItem">
      <a class="dropdown-item" v-for="item in items">
        {{item.name}}
      </a>
    </div>
  </div>
</div>


var app = new Vue({
  el: '#app',
  data: {
    selectedItem: null,
     items: [
     {
         name: "Dropdown Item"
     },
     {
         name: "Dropdown Item 2"
     },
     {
         name: "Dropdown Item 3"
     }
    ]
  },
});

기본적으로 드롭다운 항목을 클릭하면 {{selected}가 됩니다.Item}}을(를) 위해 메뉴 래퍼에 v-model을 사용하려고 했지만 아무 일도 일어나지 않았습니다.

Kumar의 답변을 기반으로 다른 매개 변수를 전달하지 않는 한 기본적으로 핸들러 메서드로 이벤트에 액세스할 수 있습니다.

단, 파라미터를 전달한 경우 이벤트를 명시적으로 전달해야 합니다.$event:

<button @click="doStuff('whatever', $event)">Do Stuff</button>

...

doStuff(whatever, event) {
    console.log(event.target);
}

이벤트 개체를 사용하는 경우 기본값에 의존하지 말고 명시적으로 전달하는 것이 좋습니다.관점에 따라 다르기도 하고 싶지는 않아요.알기 쉽게 하는 것과 타이핑 비용을 절약하는 것 중 어느 쪽인가의 차이입니다.

<!-- this works -->
<button @click="doStuff">Do Stuff</button>

<!-- this works too -->    
<button @click="doStuff($event)">Do Stuff</button>

...

doStuff(event) {
    console.log(event.target);
}

(Vue 2.6으로 테스트했습니다)

사용할 수 없습니다.v-model와 함께div여기서.

그 대신에, 를 사용해 주세요.v-click값을 갱신하기 위해 메서드를 호출하다selectedItem토글 액션을 핸들링합니다.

그리고 한 가지 더요.v-for그랬어야 했는데key idVuejs가 추천하는 것입니다.

도입 초안만 작성하면 됩니다.

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>{{selectedItem}}</span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a class="dropdown-item" v-for="item in items" :key="item.id" v-click="handleSelectItem(item)">
        {{item.name}}
      </a>
    </div>
  </div>
</div>


var app = new Vue({
  el: '#app',
  data: {
    selectedItem: null,
     items: [
     {
         id: 1,
         name: "Dropdown Item"
     },
     {
         id: 2,
         name: "Dropdown Item 2"
     },
     {
         id: 3,
         name: "Dropdown Item 3"
     }
    ]
  },
  method: {
     handleSelectItem(item){
       this.selectedItem = item.name;
       // you can also handle toggle action here manually to open and close dropdown
     }
  }
});

이벤트를 핸들러 함수에 전달하고 event.target별로 액세스할 수 있습니다.

<div class="dropdown-menu" id="dropdown-menu" role="menu">
 <div class="dropdown-content" v-model="selectedItem">
  <a class="dropdown-item" v-for="item in items" @click="HandlerFunction">
    {{item.name}}
  </a>
 </div>
</div>

var app = new Vue({
 el: '#app',
 data: {
  selectedItem: null,
  items: [
   {
     name: "Dropdown Item"
   },
   {
     name: "Dropdown Item 2"
   },
   {
     name: "Dropdown Item 3"
   }
  ]
 },
 methods: {
  HandlerFunction(event){
   console.log(event.target)
  }
 }
});

ES6 구문 약어는 다음 방법으로도 사용할 수 있습니다.

... template
<a @click="expand" data-toggle="collapse" aria-expanded="false">{{ menuItem.title }}</a>
... more template


... script section
methods: {
    expand({ target }) {
      console.log('this is the element i clicked: ', target);
    }
  }
... more script code

감사합니다. 당신의 방식대로 조금 다르게 만들겠습니다.

<a class="dropdown-item" v-model="selectedItem" v-for="item in items" @click="selected(item)">
        {{item.name}}
      </a>


var app = new Vue({
  el: '#app',
  data: {
    selectedItem: null,
     items: [
     {
         name: "Dropdown Item"
     },
     {
         name: "Dropdown Item 2"
     },
     {
         name: "Dropdown Item 3"
     }
    ]
    },
    methods: {
      selected(element) {
        this.selectedItem = element.name
      }
    }
  });

언급URL : https://stackoverflow.com/questions/53737648/how-get-clicked-item-in-vue