は、データ - の値を取得する方法* vuejsの属性

Question

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

マイボタン、

<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です。モーダル

​​

Answer 1

ため

コードの単純なオプションが同様に削除ボタンにIDをバインドします

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

Answer 2

私はその後にその関数を呼び出して、コンポーネント関数内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) Lifecycle hooks documentation

---

出力例insid console.log(this)を実行します電子部品：