Trouble accessing properties in Vue.js mounted function

Question

Trouble accessing properties in Vue.js mounted function

Despite my experience with Vue.js, I found myself feeling a bit like a mad scientist this morning :). The task at hand involved initializing Google Maps within the mounted function of a component - a process I'm quite familiar with. However, this time, I encountered an unexpected behavior where accessing the same `this` variable within the `mounted` function seemed to be shared when using the component multiple times on my page.

While the props returned correct values within the template and methods, the mystery deepened as both instances logged the exact same object and ID in the console, even sharing the `_uid` property. This oddity extended to modifications made to the `this` variable in one instance affecting the other component as well, leading to a perplexing situation of shared objects.

If anyone has faced a similar predicament or has insights on how to resolve it, I would greatly appreciate your input.

javascript vue.js

Answer 1

Answer №1

Do not use self-closing tags for components.

It is important for Vue templates to adhere to valid HTML standards. Self-closing tags, which are more common in XHTML syntax, should be avoided as they are considered outdated.

(Update:)

In version 2.0 of Vue, self-closing tags can be used if you refrain from using in-dom templates.

You might also encounter issues with camelCase vs. kebab-case. The code snippet below demonstrates the correct behavior.

Vue.component('locationInput', {
  template: '#location-input-template',
  props: ['id'],
  mounted() {
    console.log('Component object representation ==> ', this._uid)
    console.log('ID ==> ', this.id)
  }
});

new Vue({
  el: '#my-travel-app'
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<template id="location-input-template">
  <div class="LocationInput">
    <input type="text" :id="id">
  </div>
</template>

<div id="my-travel-app">
  <location-input id="id1"></location-input>
  <location-input id="id2"></location-input>
</div>

Answer 2

Do not use self-closing tags for components.

It is important for Vue templates to adhere to valid HTML standards. Self-closing tags, which are more common in XHTML syntax, should be avoided as they are considered outdated.

(Update:)

In version 2.0 of Vue, self-closing tags can be used if you refrain from using in-dom templates.

You might also encounter issues with camelCase vs. kebab-case. The code snippet below demonstrates the correct behavior.

Vue.component('locationInput', {
  template: '#location-input-template',
  props: ['id'],
  mounted() {
    console.log('Component object representation ==> ', this._uid)
    console.log('ID ==> ', this.id)
  }
});

new Vue({
  el: '#my-travel-app'
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<template id="location-input-template">
  <div class="LocationInput">
    <input type="text" :id="id">
  </div>
</template>

<div id="my-travel-app">
  <location-input id="id1"></location-input>
  <location-input id="id2"></location-input>
</div>

Trouble accessing properties in Vue.js mounted function

Answer №1

Similar questions

Displaying a PDF file in a browser using a byte array with JavaScript without the need for base64 encoding

Enhance ant design modal functionality by enabling resizing capabilities

Tips on building a carousel with slot elements

Sending information from a parent component to a child component in Vue.js and then showcasing the data

Display the webpage exclusively when the application has been set with `app.use('/api')` in Express 4

Having trouble with clicking a button in HTML?

Delving Into the Mysteries of Bootstrap Modal Fading

Improve the translation animation on an element containing numerous child nodes

Automatically Transmit Input Values Using JavaScript

How can I implement Google Analytics Event tracking for all <audio> tags using Javascript?

Passing an event handler from one Vue component to another Vue component results in an error: The handler for the "updatefilters" event is invalid and is undefined

What is the best method for choosing all options in a select box in IE without experiencing the scrolling effect?

Javascript and the Cookie Conundrum

"Proceeding to" express this redirection

How to organize a nested JSON array object in JavaScript

What is the best approach to displaying multiple instances of a single class in React, similar to the layout used in platforms such as Instagram, Facebook

Pinpointing a specific region within an image by utilizing offsets

Why does jQuery.get() keep altering the URL I'm using?

Transferring String data between Java and JavaScript using Webview in both directions

In search of the most recent content inputted into a textarea