Acquiring information from a different Vue.js component

I am faced with a puzzle involving 2 components, A and B.

Component A:

import B from '../components/B.vue';

export default {

    components: {
        B
    },

    methods: {
        test: function() {
            console.log(B.data().settings);
        }
    }
}

As for component B:

export default {

    data() {
        return {
            setting: '123'
        }
    }

}

Each time I trigger the test method, the value returned is 123. However, when I input a new value and trigger the test method again, the value remains at 123. I am quite puzzled by this. Any help would be greatly appreciated. Thank you!

Answer №1

When working with the data function of a component's definition, you can easily access the desired value from the instance of the component by simply calling the specific data you need. For instance:

import B from '../components/B.vue';

// Remember to work on the instance of Vue, not within the components definition
let b = new B()

console.log(b.settings) // This will display the settings for that instance, with reactive properties
console.log(b.$data) // This will show all the current data for that component, also being reactive
console.log(B.data()) // This will display the definition data, which is not reactive

It is important to figure out how to obtain a reference to the B instance from the A Vue instance, especially if there are multiple B components within A.

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

Can a variable declared in wdio.conf be accessed?

Within the wdio.conf file, I have implemented a function called onPrepare where I am storing all my feature files in an array. let listOfFiles = fs.readdirSync(process.cwd() + '/features'); var featureFiles = []; listOfFiles.map((file) => { ...

The Axios interceptor is failing to retrieve the user's current authentication token from the Vuex store

Currently, I am utilizing Axios to transmit user input to a DRF API, which then returns an authentication token. This token is being saved in the Vuex store. However, when I attempt to request another API endpoint using Axios with the most recent token in ...

Customizing Passport JS Bearer strategy for various endpoints and HTTP REST operations

I'm currently using the BearerStrategy and I am attempting to configure different strategies for each endpoint or method within the same router. After reviewing the documentation, I have not come across any references to this particular scenario othe ...

Client.db is undefined error encountered in MongoDB backend API

I'm having trouble retrieving data from a collection in my MongoDB backend. Every time I try, I encounter an error stating that the client is not defined. Has anyone else experienced this issue and knows how to resolve it? Error: Client is not define ...

Obtain the v-if condition or data as plain text within a child component

Hey there! I'm currently working on creating a custom Vue component that is displayed based on the v-if directive. I also need to be able to update the value of the directive data (modalStatus) from within the component. <modal v-if="modalStatus" ...

Node.js server only supports cross-origin requests for protocol schemes when working with an Angular front end

Struggling to configure CORS on a local site hosting a Node.js server and an Angular client. Encountering the following error: Access to XMLHttpRequest at 'localhost:3000/api/v1/users' from origin 'http://localhost:4200' has been bl ...

While attempting to upload a file in my Mocha Node.js test, I encountered the message: "Received [Object null prototype] { file: { ... }}"

Everywhere I find the solution in white : app.use(bodyParser.urlencoded({extended: true})); I can use JSON.stringify(req.files) However, I am sure there is a way to fix my problem. My Mocha test : it('handles file upload', async function () { ...

Is it possible to use Koajs without needing to include the --harmony tag?

Following the merge of iojs into Node, I assumed that I could run koajs without the need for the --harmony tag (as it would have support for generators from es6). Inside my server.js file, I have the following code: var koa = require('koa'); va ...

Delay in only a portion of the AJAX response

I created a chat application that is functioning correctly, but I am encountering an unexpected behavior. When a user sends a message, the user's name, time, and message should be displayed in order. However, currently, it seems like the username and ...

What is the reason behind Intellij Code Inspection indicating that a selector is not being used?

I have a small project consisting of two files located in the same folder. App.css .App-align-left { text-align: left; } App.js import React from 'react'; import 'App.css'; class App extends React.Component { constructor(p ...

The response detail error code 2 indicates that the post method API body check has failed within the Agora REST API, resulting in

const Authorization = `Basic ${Buffer.from(`${config.CUSTOMERID}:${config.CUSTOMER_SECRET}`).toString("base64")}`; const acquire = await axios.post(`https://api.agora.io/v1/apps/${config.agoraAppId}/cloud_recording/acquire`,{ ...

Issue with adding a video to a playlist using Youtube API

While I have successfully implemented GET requests using the Youtube API v3, I am encountering difficulties when trying to make a POST request to add a video to a playlist. Despite trying various approaches such as including the key in the query string, pl ...

Adjust choices in a dropdown menu based on the selection of another dropdown menu

I am attempting to create a scenario where selecting an option from one dropdown list will dynamically change the options available in the next dropdown list. You can find my code on jsfiddle <!DOCTYPE html> <html> <body> &l ...

Exploring the depths of JSON: Unraveling the secrets of reading dynamic object data

Currently, I am receiving a JSON file from another app and my goal is to parse it in order to extract the data contained within. The JSON includes user-defined dynamic data with changing key/value pairs, which has left me feeling uncertain about how to eff ...

What is the ideal framerate for smooth animation?

I'm looking to add a snow animation using JavaScript. I currently have it running at 200ms which is decent but not smooth enough. Would changing the interval to 20ms make it more fluid, or would it be inefficient and strain the CPU? window.setInterva ...

What is the best way to extract a value from a JSON object?

I am having trouble deleting data from both the table and database using multiple select. When I try to delete, it only removes the first row that is selected. To get the necessary ID for the WHERE condition in my SQL query, I used Firebug and found this P ...

My Node/Express application is failing to recognize updates made to my Pug view files

I have a Node/Express app that utilizes the Pug/jade template engine, and I am able to render everything successfully. However, I am facing an issue where modifications made to my index.pug file do not reflect on the homepage, even after restarting the ser ...

Adjust the HTML layout based on the JSON data provided

I am working with a JSON script that contains live matches, which change every 5 minutes. The changes could involve keys such as live_in or score. Matches are also being deleted and added to the JSON. I want to ensure that my HTML output remains updated at ...

Adding metadata fields to an existing Markdown file within TinaCMS

Is it feasible to enhance a Markdown file using TinaCMS by introducing new frontmatter fields? Instead of generating a brand new Markdown file, my goal is to modify the current one by appending new frontmatter fields. Currently, I am able to modify a sin ...

"Utilizing the Image onLoad event in isomorphic/universal React: Activating event registration once the image has been

When a page is rendered isomorphically, the image can be downloaded before the main script.js file. This means that the image may already be loaded before the react register's the onLoad event, resulting in the event never being triggered. script.js ...