vuej의 data-* 속성 값을 얻는 방법

vuej의 data-* 속성 값을 얻는 방법

버튼을 클릭하면 모달(modal)이 열리며, 모달에 표시할 내용은 해당 버튼에 전달된 데이터 속성을 기반으로 합니다.

제 단추는

<button class="btn btn-info" data-toggle="modal"
        data-target="#someModal" :data-id=item.id :data-name=item.name>
        Edit
    </button>

제 모달에는 버튼이 몇 개 있는데, 클릭하면 데이터 속성인 파라미터와 함께 vuejs 함수를 호출해야 합니다.

내 모달 버튼은

<div class="modal-footer">
    <button type="button" class="btn btn-danger"
        @click.prevent="deleteItem()" data-dismiss="modal">
        Delete
    </button>
    <button type="button" class="btn btn-warning" data-dismiss="modal">
        <span class='glyphicon glyphicon-remove'></span> Close
    </button>
</div>

여기에서는 파라미터를 전달해야 합니다.deleteItem()이 파라미터는data-id위의 버튼을 누르면 알 수 있습니다.

모달 코드

    <div id="deleteModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Delete</h4>
                </div>
                <div class="modal-body">
                    <div class="deleteContent">
                        Are you Sure you want to delete ?
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn actionBtn btn-danger"
                            @click.prevent="deleteItem()"
                            data-dismiss="modal">
                            Delete <span id="footer_action_button"
                                class='glyphicon glyphicon-trash'> </span>
                        </button>
                        <button type="button" class="btn btn-warning"
                            data-dismiss="modal">
                            <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

추천하는 것은console.log(this)컴포넌트 함수 내에서 버튼을 클릭하여 해당 함수를 호출하면 컴포넌트의 모든 속성을 검사할 수 있습니다.

(위의 출력 예시는 아래 첨부 이미지를 참조해 주세요.console.log를 참조해 주세요.

이는 다른 것들과 마찬가지로, 당신이 이 시스템에 접속할 수 있다는 것을 보여줍니다.$elDOM 요소를 보유하고 있는 속성.그 결과, 다음과 같은 코드를 추가 할 수 있는 등, 많은 가능성이 열려 있습니다.mounted컴포넌트의 라이프 사이클 훅:

mounted() {
  console.log(this);
  this.myAttribute = this.$el.getAttribute('data-attribute-name');
},

이 예에서는 다음과 같은 데이터 속성에 myAttribute가 정의되어 있습니다.

// This value gets attributed during an earlier lifecycle hook.
// It will be overridden in the component's mounted() lifecycle hook.
data() {
  return {
    myAttribute: 'defaultvalue'
  }
}

Vue.js(v2) 라이프 사이클 후크 문서

---

실행 시 출력 예console.log(this)컴포넌트 내부:

다음과 같이 "item.id"을 전달할 수도 있습니다.

<button type="button" @click="deleteItem(item.id)">Delete</button>

HTML

<button type="button" @click.prevent="deleteItem()" :data-id="1" data-dismiss="modal">
Delete <span id="footer_action_button" class='glyphicon glyphicon-trash'> </span>
</button>

뷰

methods:{
  deleteItem: function(){
    var id = event.target.getAttribute('data-id');
    console.log(id) // 1
  }
}

다음은 데모 https://codepen.io/maab16/pen/jONZpVG 입니다.

간단한 옵션은 ID를 삭제 버튼에 바인딩하는 것입니다.

  <button type="button" class="btn btn-danger"
        @click.prevent="deleteItem(this)"  :data-id=item.id data-dismiss="modal">
        Delete
    </button>

언급URL : https://stackoverflow.com/questions/42269260/how-to-get-the-values-of-data-attributes-in-vuejs