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

【问题标题】：Vuetify - getAttribute of data attribute in a component returns nullVuetify - 组件中数据属性的getAttribute返回null
【发布时间】：2020-04-25 20:06:15
【问题描述】：

刚开始使用 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 值。我在上面做错了什么吗？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

v-btn 是一个组件而不是原生 html 元素，它可以作为某些事件的目标来处理，为了实现相同的行为，将 ref 添加到该组件，如 <v-btn ... ref="btn">.. 并以 @ 访问属性987654325@：

完整示例

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>

【讨论】：