组件中数据属性的Vuetify-getAttribute返回null

Question

刚从Vue开始，需要一些关于最佳实践的建议。

我正在尝试为Vuetify按钮添加一个简单的数据属性。

<v-btn @click="btnClick" data-post="p123">Blue Button</v-btn>

new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return{
}
},
methods:{
btnClick(e) {
console.log(e.target.getAttribute('data-post'));
}
}

点击按钮，我得到一个null值。我上面是不是做错了什么？

Answer 1

您可以尝试以下内容。currentTarget属性为您提供目标单击的父元素。从而可以获得属性。

methods: {
btnClick(e) {
console.log(e.currentTarget.dataset.post);
}
}

Answer 2

v-btn是一个组件，而不是可以作为某些事件的目标处理的本地html元素，为了实现相同的行为，向该组件添加一个ref(如<v-btn ... ref="btn">..(，并访问属性this.$refs.btn.$el.getAttribute('data-post'):

完整示例

new Vue({
el: '#app',
vuetify: new Vuetify(),
methods: {
btnClick(e) {
console.log(this.$refs.btn.$el.getAttribute('data-post'));
}
}
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-content>
<v-btn @click="btnClick" data-post="p123" ref="btn">Blue Button</v-btn>
</v-content>
</v-app>
</div>