Can you retrieve data or HTML content from the main Vue 3 component?

I have experience using Vue in previous projects but I'm currently facing some challenges on how to pass information/arguments to a root Vue 3 component. My goal is to set up something like this in my HTML:

  <div class="nav-app" nav="some-nav-jht"></div>

Then, within the mounted() method, I want to be able to access the nav attribute like this:

mounted(){
    console.log('Here is the value of nav: ' + this.nav);

Can anyone guide me on how to achieve this? It's worth noting that I am working with Vue loaded from a CDN without webpack or similar tools.

javascriptvue.jsvuejs3

Answer №1

It has been highlighted in the feedback that you can use template refs to access an element from within a <script>.

To make this work, simply add the ref attribute to the desired element and assign it a name (e.g., "navapp"):

<div id="app">                             👇
  <div class="nav-app" nav="some-nav-jht" ref="navapp">⋯</div>
</div>

In the mounted hook, you can then access the reference using this.$refs.REFNAME:

<script>
Vue.createApp({
  mounted() {
    const navapp = this.$refs.navapp
    console.log('Accessing nav: ' + navapp.getAttribute('nav'))
  }
}).mount('#app')
</script>


Vue.createApp({
  mounted() {
    const navapp = this.$refs.navapp
    console.log('Accessing nav: ' + navapp.getAttribute('nav'))
  }
}).mount('#app')
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d6d5c5e0938e928e9391">[email protected]</a>/dist/vue.global.prod.js"></script>
<div id="app">
  <div ref="navapp" nav="some-nav-jht">Hello world</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular's minimum date validation is not accurate for dates prior to the year 1901

Any assistance or clarification on this matter would be greatly appreciated. It appears that there may be an issue with my implementation, as otherwise it seems like a significant bug within Angular. Setup Create a form with a minimum date of 0001-01-01 ...

javascriptangularjsvalidationdate

Is it possible to dynamically create new input fields by starting their index from the highest number after deletion?

I am working on a feature where users can add new rows with unique IDs and names. Everything works well, but the issue arises when deleting a row other than the last one. Here is an example of my code: $("#add_row").on('click', addRow); funct ...

javascriptjqueryindexing

Tips for invoking a JavaScript class method from an HTML document

I've created a Typescript class that dynamically inserts an HTML element to a page after it's loaded. Here is the code snippet: const calcElement: string = ` <div class="container"> <span class="cc-title">Field</span> ...

javascripthtml

What is the reason for the alterations made to a basic object causing an impact on a responsive object even when they are distinct entities

Below is the code snippet I am working with: const cellsArray = Array.from(Array(fieldSize.height), (_, y) => Array.from(Array(fieldSize.width), (_, x) => new Cell(y, x)) ); const fieldCells = ref(cellsArray); console.log(fieldCells.value[0][0] = ...

vue.jsvuejs3

enhanced labeling for checkboxes in Vuetify

Below is a snippet of my straightforward code: <v-checkbox v-model="rodo" label="I consent to Terms and Conditions (click for more info)" :rules="termsRules" required ></v-checkbox> I am looking to keep the label simple with an option ...

javascriptvue.jsvuetify.js

What is the correct way to specify the type in my functional component?

I was trying to define the type in my component in a different way, I know it can be done using classes but is there a way to achieve this with functional components without exporting the interface? Despite my extensive research, I couldn't find any r ...

javascripttypescriptreact-nativeecmascript-6

What is the best way to design a navigation bar for a one-page application using Vue?

Currently, I am developing a Vuejs single-page application and I'm exploring ways to implement a navbar that can toggle the visibility of different sections within the app upon clicking. While I have successfully designed the navbar layout, I am encou ...

javascriptvue.jsvue-componentvuetify.jssingle-page-application

Utilizing API data to set the state in a React component

In my quest to modify the state of this React component, I have a variable called rankAndTeam that holds the "prints=>" data listed below. My goal is to assign "Washington Capitals" to this.state.teamRank["0"], "New York Islanders" to this.state.teamRan ...

javascriptnode.jsreactjs

Coordinating Multiple Angular $http Requests using $q and Managing Errors with $q.catch

Struggling with understanding the correct utilization of Angular's $q and JavaScript's promise API. As a newcomer to Javascript, it's possible I'm making a syntax error. This question appears similar, but isn't an exact duplicate. ...

javascriptangularjsasynchronous

The issue with mediaDevices.getUserMedia not functioning properly in Safari 11 on iOS 11 persists, as the video output appears as a

I'm having trouble understanding why my code is not working. I've read that Safari 11 should be compatible with getUserMedia APIs from iOS 11, but for some reason it's not functioning as expected. My aim is to capture a QR code in a live str ...

javascriptangularjsmobile-safariios11getusermedia

"Uncaught ReferenceError: $ is not defined - $function()" error in JavaScript/jQuery

When attempting to execute a JavaScript/jQuery function, an error is encountered when using Firebug: $ is not defined $(function()". The issue arises from the placement of the JavaScript code within a file named core.js that is referenced by index.php. W ...

javascriptjquery

"Passing data from a child component to a parent component using Vue's emit

offspring template: ` <li v-for="option in listaOptiuni" :key="option.id"> <input @change="updateSelectAllToateOptiunile(); sendListaToateOptiunile()" v-model="listaToateOptiunile" :value="o ...

javascriptvue.jsvue-propsemit

Transform my Curl script into a NodeJS app

I'm trying to replicate the functionality of a curl command within my NodeJS application, but I am facing some difficulties. Any guidance on how to achieve this would be greatly appreciated. curl -H "Authorization: bearer $TOKEN" If I already hav ...

javascriptnode.jscurlrequest

Unexpected JSON token error occurs in jQuery when valid input is provided

I encountered an error that I'm struggling to pinpoint. The issue seems to be related to the presence of the ' symbol in the JSON data. After thoroughly checking, I am positive that the PHP function json_encode is not responsible for adding this ...

javascriptphpjqueryjson

Could someone help me understand this JavaScript code where a function takes an object as a formal parameter?

Within a Vue component's methods, I came across the following code snippet defining a function: methods: { onEditorChange({ editor, html, text }) { console.log('editor change!', editor, html, text) this.content = html ...

javascriptfunctionvue.js

Deleting object property within Angular ng-repeat loop

I have information structured like this: $scope.cart={"4": {"cost": 802.85, "description": "test", "qty": 1}, "5": {"cost": 802.85, "description": "test", "qty": 1}}; My goal is to iterate through this data and show it with a remove button. How can I s ...

javascriptangularjsangularjs-ng-repeat

Manipulate the CSS of a single div within a group of divs that have the same class using jQuery

I'm attempting to modify the CSS of a specific DIV that shares its class with other divs. I've searched for a solution but haven't had any luck so far. Here is the code I've been using without success: $(".singleOffer").click(functio ...

javascriptjqueryhtmlcss

Tips for concealing subsequent pages and displaying pagination in jQuery ajax response

Is there a way to display pagination based on a limiter in an ajax response? For example, if the limiter is set to 5, only show 10 page links and hide the rest. 1 2 3 4 5 6 7 8 9 10 .. next 11 12 13 14 15.. next I attempted to count the li elements in ...

javascriptjqueryajax

Searching for documents in MongoDB that meet specific criteria has become possible through the use

Criteria: COUNT the total number of documents in the collection WHERE objects.objectType is 'group' AND (objects.objectType is NOT 'person' AND relation is 'Exposed_to') Expectation: should return the count of all documents W ...

javascriptnode.jsmongodb-querynosqlaggregation

Tips for modifying and refreshing data in a live table with JQuery

One challenge I'm facing is figuring out how to transfer the data from a dynamic table back into input fields when clicking on the edit button of a specific row. Additionally, I need to update that particular row based on any changes made to the value ...

javascriptjqueryhtml