Ways to retrieve component information externally from export

As a newcomer to Vue, I've been experimenting with it before diving into our project, but I've encountered a problem.

Typically, when we create an instance like "var app = new Vue ... etc.," we can access its data using app.data. But how do we access data in components like this:

<template>
  <div id="app">
    Hello {{msg}}
  </div>
</template>

<script>   
export default {
  name: "App",  
  data() {
    return { 
        msg: "World"
    }  
}
}

console.log(this.msg)
</script>

I'm struggling to access the msg property―I've tried this.msg, but it's not working. I prefer not to use Vuex for now, as I believe it may be too complex for a small, simple app.

How can I access it?

Answer №1

It's unclear to me if Vue has any restrictions, but in terms of JavaScript, couldn't you simply achieve this?

 const information = {
   title: "Web Application",  
   info() {
       return { 
         message: "Hello"
      }  
   }

}

export default information;

const text = app.info();

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

Importing Next.js with variables or conditionally importing the module

import { keyFeatures } from 'common/data/AppClassic'; I am completely new to using Next.js and templates. Despite that, I have successfully integrated i18n into my project without much difficulty. However, I now face the challenge of wanting to ...

Eliminate vertical divider in table with static column using element ui

#inquiry I am currently utilizing the element-ui library for my project. If you would like to learn more, please click here. One challenge I am facing is working with fixed columns in table data. https://i.sstatic.net/u2RRT.png After scrolling horizont ...

Annoying jQuery animation error: struggling to animate smoothly and revert back. Callback function conundrum?!

I'm completely lost with what I have accomplished. My goal was to create an animation where an element slides in from a certain position and then slides back when another element is clicked. To achieve this, I included the second event within the call ...

Having difficulty accessing attributes within the template - encountering errors for all attributes except for 'name', stating '[attributename] is not defined'

There seems to be an issue with accessing Object attributes other than 'name' in the template. When trying to access attributes like id or url, errors such as 'id/url/whatever is not defined' are logged in the console. The JSON file pas ...

Modify the background color based on the length of the input in Vue

Can you change the background color of the initial input field to green if the value of the Fullname input field is greater than 3 characters? See below for the code: <div id="app"> <input type="text" v-model="fullname" placeholder="Enter Full ...

Completion of the form within the Bootstrap popover

I have a feature where dynamically created rows contain an "add" button. When the user clicks on the add button, a form is loaded into a Bootstrap popover. See FIDDLE DEMO My issue is: Why isn't this code being triggered? I am trying to validate ...

Is it possible to make a call to an endpoint from within the node project?

I'm currently working on a MERN app that dynamically adds meta tags to React pages without using server-side rendering. In order to achieve this, I need to extract the query parameters from the main server file and assign the relevant metadata content ...

Leveraging the power of Google Closure Templates alongside the versatility of

We are embarking on developing an application using JavaScript and HTML5 that will utilize a rest API to access server resources, leveraging the power and convenience of jQuery which our development team is already proficient in. Our goal is to make this a ...

Transform your Angular Framework Application into a desktop application with the power of Electron

Project Description: I currently have a fully functional front-end angularjs application that is connected to a back-end Java application deployed on Tomcat, running on a different port (8443). Up until now, I have been accessing the application through a ...

How does gray-matter function in Node.js affect the matter within?

import fs from 'fs'; import path from 'path'; import matter from 'gray-matter'; const postsDirectory = path.join(process.cwd(), 'posts'); // ... ... ... // export function getPostData(id) { const fullPath = ...

Angular's implementation of a web socket connection

I am facing an issue with my Angular project where the web socket connection only opens upon page reload, and not when initially accessed. My goal is to have the socket start as soon as a user logs in, and close when they log out. Here is the custom socke ...

Looking to convert an empty star glyphicon button into a star glyphicon button when clicked using JavaScript?

Is there a way to make the glyphicon change when clicking on the button instead of the glyphicon itself? <script> $('.btn').click(function(){ $(this).find('.glyphicon').toggleClass('glyphicon-star-empty glyphico ...

Scroll indefinitely, obliterate and regenerate elements as you scroll

I have a unique issue that I need advice on from experts in this field. On my website, I have a Tree with infinite scroll functionality. The tree's image is iterative and the number of iterations depends on the data source provided. The data source ...

When the Angular script is executed, the variable is not defined

One of my custom directives receives an object named 'vm' in its scope, which contains a property/value pair (ccirCategoryIncidentI : 3) that I need to access. When I try to log this value with console.log(scope.vm.ccirCategoryIncidentI), it init ...

Enzyme examination: Error - anticipate(...).find was not recognized as a function

What is the reason for .find not being recognized as a function in the code snippet below? import React from 'react'; import { shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; import { AuthorizedRoutesJest } from ...

Is there a way to minimize superfluous re-renders in React without resorting to the useMemo hook?

I am currently evaluating whether I should adjust my strategy for rendering components. My current approach heavily relies on using modals, which leads to unnecessary re-renders when toggling their visibility. Here is a general overview of how my componen ...

Decode the string containing indices inside square brackets and transform it into a JSON array

I have a collection of strings that contain numbers in brackets like "[4]Motherboard, [25]RAM". Is there a way to convert this string into a JSON array while preserving both the IDs and values? The desired output should look like: {"data":[ {"id":"4","i ...

Using Lightmaps with Three.js

Is it true that lightmaps function independently of other textures? It seems like I need to establish a second set of UVs. I've exported my JSON object with a second set of UVs and included the following code snippet: geometry.faceVertexUvs[0] = ge ...

Javascript Mouse Events Not Functioning Properly with Three.JS Scene Components

Currently feeling quite perplexed (probably due to fatigue from working on this at an inopportune time). I'm in the midst of trying to configure my three.js application to trigger distinct functions based on different mouse events when the cursor hove ...

Guide on how to compare two arrays in JavaScript and identify mismatches by their respective indices

let x=["e","f","g","h"]; let y=["f","e","g","h"]; I want the following result: Inconsistent array from x Inconsistency array=["e", "f"]; ...