클릭 시 vue js get html5 특성

클릭 시 vue js get html5 특성

저는 vuejs 최신 버전을 사용하여 프로젝트를 진행하고 있습니다.이 프로젝트에서는 vue on click 이벤트와 관련된 html5 속성을 얻고 싶습니다.

내 버튼 코드는

<a href="javascript:" class="btn btn-info btn-xs" @click="editModal"
                                           data_id="{{$staff->id}}">
          <i class="fa fa-pencil"></i>
</a>

그리고 내 js는

var staffModal = new Vue({
el: '#app',
methods: {
    editModal: function(){
        console.log(this.data_id);
    }
}});

콘솔에서는 정의되지 않습니다.올바른 가치를 얻는 방법.

MouseEvent 인스턴스는 이벤트핸들러를 클릭하기 위한 첫 번째 파라미터로 전달됩니다.사용하다getAttribute접근하기 위한 함수입니다. MouseEvent.target을 가리키다<i>그리고.MouseEvent.currentTarget로.<a>(이벤트 리스너가 접속되어 있는 것을 확인합니다).editModal 메서드를 다음과 같이 변경합니다.

editModal: function(e) {
    console.log(e.currentTarget.getAttribute('data_id'));
}

BTW: 데이터 속성을 작성하려면 -(대시)가 아닌 -(밑줄)을 사용합니다.올바른 것은data-id것은 아니다.data_id

코드에 몇 가지 문제가 있습니다.HTML 코드부터 시작합시다.

특성을 보간해야 하는 경우 v-bind를 사용해야 합니다.두 가지 방법이 있습니다.사용.v-bind:attribute="expression"또는 줄임말:attribute="expression".사용.attribute="{{ expression }}"확실히 효과가 없습니다.

또 하나 중요한 것은 커스텀 속성명을 사용하려면data-custom-attribute-name대신data_custom-attribute-name.

<div id="app">
  <a
    href="javascript:"
    class="btn btn-info btn-xs"
    @click="editModal"
    :data-id="staff.id"
    :data-my-amazing-custom-attribute="staff.name">
    Click me!
  </a>
</div>

그럼 JS로 이동하겠습니다.당신의 질문으로 $staff 변수의 출처를 알 수 없었기 때문에, 그것을 실증하기 위해서 개작했습니다.

new Vue({
  el: '#app',
  methods: {
    editModal: function(event){
      // Here you will be able to see all the
      // custom attributes in camelCase
      console.log(event.target.dataset);
      console.log('ID:', event.target.dataset.id);
      console.log('Name:', event.target.dataset.myAmazingCustomAttribute);
    }
  },
  data () {
    return {
      staff: {
        id: 'some id',
        name: 'Name of my amazing custom attribute'
      }
    }
  }
});

동작하고 있는 버전은, https://jsfiddle.net/6v3wyoh6/ 에서 확인할 수 있습니다.

도움이 됐으면 좋겠다!

입수 방법id데이터 속성도 괜찮고, 작동하겠지만, 제 질문은 왜일까요?Vue를 사용하니까 Vue를 사용하세요.패스할 수 있습니다.id 직접.

<a class="btn btn-info btn-xs" @click="editModal({{$staff->id}})">
  <i class="fa fa-pencil"></i>
</a>

그리고 당신의 Vue 코드는

methods: {
    editModal: function(id){
        console.log(id);
    }
}

이제 데이터 속성의 파악에 대해 걱정할 필요가 없습니다.이것은 Vue를 사용할 때 불필요하기 때문에 일반적으로 피해야 하는 DOM 조작입니다.

주의: 여기서는 라라벨이나 이와 유사한 것을 사용하고 있다고 가정합니다.{{$staff->id}}렌더링 됩니다.id.

vue docs 링크입니다.이벤트 핸들러에게 가치를 전달하기 위한 정확한 방법입니다.

    <button v-on:click="$emit('enlarge-text', 0.1)">
       Enlarge text
    </button>

언급URL : https://stackoverflow.com/questions/44324869/vue-js-on-click-get-html5-attribute