web-dev-qa-db-ja.com

vuejsのdata- *属性の値を取得する方法

クリックするとモーダルを開くボタンがあり、モーダルに表示するコンテンツはボタンに渡されたデータ属性に基づいています。

私のボタン、

_<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>
_
javascriptjqueryvue.jsvuejs2
6
Mann

コンポーネントの関数内でconsole.log(this)を実行し、ボタンのクリックでその関数を呼び出して、コンポーネントのすべてのプロパティを検査できるようにすることをお勧めします。

（上記の_console.log_ステートメントの出力例など、下の添付画像を参照してください。）

これは、とりわけ、DOM要素を保持する_$el_プロパティにアクセスできることを示しています。これにより、コンポーネントのmountedライフサイクルフックに次のコードを追加できるなど、多くの可能性が開かれます。

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

この例では、this.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)を実行したときの出力例：

enter image description here

4
LittleTiger

次のように "item.id"を渡すこともできます。

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

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>

Vue

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

これがデモです https://codepen.io/maab16/pen/jONZpVG

0
Md Abu Ahsan Basir

単純なオプションは、削除ボタンにもIDをバインドします

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