как обратиться к атрибутам корневого элемента vue.js?

Question

Мне необходимо вытащить значения атрибутов из корневого элемента

<div id="app-cart" data-url="http://localhost:3000/products" data-sessid="sessid" data-link-catalog="catalog.html" data-link-index-page="index.html" data-submit-message="Ваша заявка успешно отправлена!<br> В течение 5 минут мы Вам перезвоним" data-params="">

пока я обращаюсь через DOM

sessid: document.querySelector("#app-cart").getAttribute("data-sessid")

Как это сделать правильней?

Answer 1

Воспользуйтесь свойством экземпляра $el, чтобы получить корневой элемент DOM, управляемый этим экземпляром Vue.

После того как элемент получен, получаем его атрибуты: если только data-* атрибуты необходимо получить, то можно использовать доступ к data атрибутам в JS через Element.getAttribute():

var attribute = element.getAttribute(attributeName);

где attribute - переменная, которой будет присвоено значение attributeName. attributeName - имя атрибута, значение которого необходимо получить.

или использовать свойство dataset, чтобы получить объект data свойств:

new Vue({
  el: '#app-cart',
  data: () => {
    return {
      dataAttr: []
    }
  },
  mounted() {
    this.dataAttr = { ...this.$el.dataset
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app-cart" data-url="http://localhost:3000/products" data-sessid="sessid" data-link-catalog="catalog.html" data-link-index-page="index.html" data-submit-message="Ваша заявка успешно отправлена!<br> В течение 5 минут мы Вам перезвоним" data-params="">
  <pre>{{dataAttr}}</pre>
</div>

БЛОГ НА HUSL

как обратиться к атрибутам корневого элемента vue.js?

Ответы (1 шт):