如何獲取vuejs中data- *屬性的值

我有一個按鈕，單擊它時會打開一個模式，並且要在模式中顯示的內容基於傳遞給該按鈕的數據屬性。如何獲取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這是我從上面的按鈕獲得。

代碼模態

來源

2017-02-16 Mann

您可以發佈您正在使用的模態代碼嗎？ – motanelu

發表了模態的代碼，我需要將一個參數傳遞給模態頁腳按鈕中的函數。 – Mann

當你將組件的道具作爲kebab情況傳遞時，Vue js會將它們更改爲camel case，因此'data-id'可在組件中作爲'this.dataId'使用 –

一個簡單的選擇將ID給刪除按鈕以及

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

來源

2017-02-16 09:21:36 madalinivascu

添加此項時，出現以下錯誤：[Vue警告]：屬性或方法「item」沒有在實例上定義，但在渲染過程中被引用。確保在數據選項中聲明反應數據屬性。（在根實例中找到）' – Mann

確保範圍擴展按鈕以及 – madalinivascu

是的，按鈕是在範圍本身。 – Mann

我建議做一個console.log(this)組件函數內綁定，然後調用該函數點擊按鈕，以便您可以檢查組件的所有屬性。

（參見所附的圖像，以下，對於上述console.log語句的示例輸出。）

這顯示該除其他外，可以訪問所述$el屬性保持的DOM元素。這帶來了一大堆的可能性，比如能夠將下面的代碼添加到您的組件的生命週期mounted鉤：

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

而且在這個例子中，this.myAttribute將已在（例如定義執行console.log(this)當insid

// 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

輸出示例：）你的數據屬性e組件：