Vuetify - getAttribute атрибута данных в компоненте возвращает нуль - PullRequest
Новая
       30

Vuetify - getAttribute атрибута данных в компоненте возвращает нуль

1 голос
/ 25 апреля 2020

Просто начинаю с 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 значение. Что-то не так я делаю выше?

1 Ответ

1 голос
/ 25 апреля 2020

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