What is the best way to access an HTML element when incorporating Vue through a CDN?

Question

What is the best way to access an HTML element when incorporating Vue through a CDN?

In my project, I am utilizing Vue 3.0.2 by loading it through CDN with the following code:

<head>
 ...
  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7818292b7c4d9c7d9c5">[email protected]</a>"></script>
</head>

I am wondering how I can access an HTML element within my Vue component when importing the library via CDN. In plain JavaScript, I would use

document.getElementById('element')

.

Previous discussions on this platform suggest that using $this.el.querySelector should do the trick, but I seem to lack access to that function. Could this be due to importing Vue via CDN?

This is what my component structure looks like...

const app = Vue.createApp({
        data() {
            return {
                // data members.
            }
        },
        methods: {
            // method definitions.
        } });

app.mount('#app')

Appreciate any help and guidance!

javascript vue.js vuejs3 cdn

Answer 1

Answer №1

Here is a different approach you could consider

  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abcdefdfcaef8cdbbfdabeaeadaeafb7fcfdfcadafbedaebcafde6gceeebfdecbbffeeefaebfcecdffacfd">[email protected]</a>"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ newData }}</h1>
      <input type="text" ref="textInput">
      <button @click="display">DISPLAY</button>
    </div>
    <script>
      const application = Vue.createApp({
        data() {
          return {
            newData: 'whatever'
          }
        },
        methods: {
          display() {
            console.log(this.$refs.textInput.value)
          }
        }
      });

      application.mount('#app')
    </script>

Answer 2

Here is a different approach you could consider

  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abcdefdfcaef8cdbbfdabeaeadaeafb7fcfdfcadafbedaebcafde6gceeebfdecbbffeeefaebfcecdffacfd">[email protected]</a>"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ newData }}</h1>
      <input type="text" ref="textInput">
      <button @click="display">DISPLAY</button>
    </div>
    <script>
      const application = Vue.createApp({
        data() {
          return {
            newData: 'whatever'
          }
        },
        methods: {
          display() {
            console.log(this.$refs.textInput.value)
          }
        }
      });

      application.mount('#app')
    </script>

What is the best way to access an HTML element when incorporating Vue through a CDN?

Answer №1

Similar questions

Attempting to fetch JSON data using the Vue Axios library

There was an error in the code: Unexpected token M

Having trouble with Vue component registration repeatedly failing

Navigate to a specified div using JavaScript

"Angular's ui-router allows for nested views with individual templates and controllers for each

Is it possible to determine if the selected/clicked element is a multiple of "n" using jQuery?

Strange problem with Mongoose and MongoDB arises while operating MEAN application on Openshift platform

Tips for converting ActiveRecord hierarchy into a JavaScript array

Looking to fill every space? Try using React with MUI Grid!

Guidance on redirecting and displaying the URL retrieved from an API response object in the browser using express and axios

Creating a Div element to occupy an entire row is a simple task that can be achieved

When the if statement fails to halt the code from running

Executing a function on each page within the head tag in Nuxt.js

Disabling the authentication prompt in the browser

Having trouble printing a section of a webpage after making CSS adjustments

Using Typescript to establish a connection between ngModel and an object's property

Ensuring jQuery filter() works seamlessly with Internet Explorer versions 6, 7, and 8

Is it acceptable to post variables using AJAX for processing?

I'm looking to leverage axios and useState-useEffect to collect data from numerous web pages. Any suggestions on how to do this efficiently

Leveraging the node CLI tool as a library for trimming MP3 files (trimp3