Is there a way to scan the DOM for a particular element and initiate a fresh Vue Instance?

Question

Is there a way to scan the DOM for a particular element and initiate a fresh Vue Instance?

I'm trying to come up with a method to scan the DOM for a specific element that has a class name of 'amp'. Once found, I would like to create a new Vue instance and utilize the data attributes in the HTML as values for data(). Would a loop be necessary for this task?

Is this achievable and what would be the recommended approach?

Thank you.

Sample 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

Illustration of a new instance

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

javascript vue.js vuejs2

Answer 1

Answer №1

If you want to find elements with the amp class, you can utilize document.querySelectorAll to retrieve a NodeList containing those elements. Then, you can loop through this list to initiate Vue instances.

In order to assign values to Vue data properties, you should make use of the spread operator in combination with el.dataset. Your HTML data attributes must be hyphenated instead of using camel case.

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

Answer 2

If you want to find elements with the amp class, you can utilize document.querySelectorAll to retrieve a NodeList containing those elements. Then, you can loop through this list to initiate Vue instances.

In order to assign values to Vue data properties, you should make use of the spread operator in combination with el.dataset. Your HTML data attributes must be hyphenated instead of using camel case.

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

Is there a way to scan the DOM for a particular element and initiate a fresh Vue Instance?

Answer №1

Similar questions

The property linerGradiant of r cannot be destructured because it is not defined

State not getting updated with array passed to this.setState()

Is it possible to programmatically include a getter method to a class in JavaScript or TypeScript?

Retrieving information from an ajax array in PHP

Display loading spinner in Material-UI Table while fetching data

C# implementation of the btoa function from JavaScript

Automatically adjust text size within div based on width dimensions

Troubleshooting a Basic jQuery Validation Problem

Centering the scrollIntoView feature on mobile devices is presenting challenges with NextJS applications

Unable to transmit an object using ExpressJS

Utilizing AngularJS: Employing the $q Promise Feature to Await Data Readiness in this Scenario

Error TS7053 indicates that an element is implicitly assigned the 'any' type when trying to use a 'string' type to index a 'User_Economy' type

Automatically navigate to a specific selection within the Autocomplete feature

Issue encountered while executing a freshly created VUE JS Hello.world application

Generate steps using Material UI/React Stepper to create organized pages (similar to Table Pagination)

Top method for cycling through an Array in React

Verification of unique custom string

Transmit and exchange events between two JavaScript files within a node.js environment

The FindProxyForURL function in a pac (proxy-auto-config) file is not compatible with the IE browser

Creating Unique Identifiers in ExpressJS