Как проверить DOM для определенного элемента и создать новый экземпляр Vue?

Question

Я пытаюсь найти способ проверить DOM для определенного элемента с именем класса 'amp'. Если это соответствует, то я хочу, чтобы новый экземпляр Vue был создан и использовал атрибуты данных в HTML, которые будут использоваться как data (). Я предполагаю, что понадобится какая-то петля?

Возможно ли это и каков будет правильный подход?

Спасибо.

Пример HTML:

<div class="amp" id="vue" data-contentDeliveryUrl="www.urlexample.com" data-encodedQuery="=query234" data-cidItem="555-555-555"></div>

<div class="amp" id="vue" data-contentDeliveryUrl="www.urlexample.com" data-encodedQuery="=query123" data-cidItem="666-666-666"></div>

index.js

Пример нового экземпляра

new Vue({
 el: '#vue',
 data() {
    return {
        contentDeliveryUrl: contentDeliveryUrl,
        encodedQuery: encodedQuery,
        cidItem: cidItem
    }
 },
 render: h => h(Page)
})

Answer 1

Вы можете использовать document.querySelectorAll для возврата NodeList элементов, которые содержат класс amp. Затем выполните итерацию по этому списку, чтобы создать экземпляры Vue.

Чтобы установить свойства данных Vue, вам потребуется использовать оператор распространения вместе с el.dataset. Атрибуты данных в вашем HTML должны быть разделены дефисом вместо использования верблюда.

(function() {
  document.querySelectorAll('.amp').forEach(el => {
    new Vue({
      el,

      data() {
        return {
          ...el.dataset,
        }
      },

      mounted() {
        console.log(this.$data)
        // this.contentDeliveryUrl
        // this.encodedQuery
        // this.cidItem
      },
    })
  })
})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="amp" id="vue" data-content-delivery-url="www.urlexample.com" data-encoded-query="=query234" data-cid-item="555-555-555"></div>

<div class="amp" id="vue" data-content-delivery-url="www.urlexample.com" data-encoded-query="=query123" data-cid-item="666-666-666"></div>