【问题标题】: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 添加到该组件,如 &lt;v-btn ... ref="btn"&gt;.. 并以 @ 访问属性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>

      【讨论】:

        猜你喜欢
        • 2010-11-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-09-16
        • 1970-01-01
        相关资源
        最近更新 更多