Leverage variables from different Vue components and link them together

Question

Leverage variables from different Vue components and link them together

I'm currently working on two different sections of the website

First: Is it acceptable to use one instance within another, particularly with v-model? Are there any drawbacks to this approach?

Second: Is there a way to reference each other, such as placing the footer in the aside section even if one is declared before the other? When I attempt to do this, I receive an error stating "footer is undefined".

Here is my JavaScript code:

var aside = new Vue({
    "el": "aside",
    data: {
        name: "Peylan"
    }
});
var footer = new Vue({
    "el": "footer",
    data: {
        companyname: "Company Inc"
    }
});

This is my HTML code:

<aside><h3 v-bind="footer.companyname"></h3></aside>
<footer>
    <input type="text" v-model="aside.name">
</footer>

javascript vue.js vuejs2

Answer 1

Answer №1

If you want to handle this situation properly, the best approach is to utilize a shared Vuex store.

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

<aside><h3 v-text="footer.companyname"></h3></aside>
<footer>
    <input type="text" v-model="aside.name">
</footer>

<script>
const store = new Vuex.Store({
    strict: false,
    state: {
        aside: {
            name:"Peylan"
        },
        footer: {
            companyname:"Company Inc"
        }
    }
});
var aside = new Vue({
    store,
    "el":"aside",
    data:{},
    computed: {
        ...Vuex.mapState(['aside', 'footer'])
    }
});
var footer= new Vue({
    store,
    "el":"footer",
    data:{},
    computed: {
        ...Vuex.mapState(['aside', 'footer'])
    }
});
</script>

This demonstration provides a simplified demonstration. For more intricate usage (such as with getters, actions, and mutations), it is advisable to refer to Vuex's official documentation.

Alternatively, you could implement a computed property on both components, as shown below.

Keep in mind that this approach may introduce some challenges, which is why .$mount() is necessary in this scenario.

<script src="https://unpkg.com/vue"></script>

<aside><h3 v-text="footer.companyname"></h3>
</aside>
<footer>
    <input type="text" v-model="aside.name">
</footer>

<script>
var aside = new Vue({
    data:{
        name:"Peylan"
    },
    computed: {
        footer() { return footer; }
    }
});
var footer = new Vue({
    data:{
        companyname:"Company Inc"
    },
    computed: {
        aside() { return aside; }
    }
});
aside.$mount("aside");
footer.$mount("footer");
</script>

Answer 2

If you want to handle this situation properly, the best approach is to utilize a shared Vuex store.

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

<aside><h3 v-text="footer.companyname"></h3></aside>
<footer>
    <input type="text" v-model="aside.name">
</footer>

<script>
const store = new Vuex.Store({
    strict: false,
    state: {
        aside: {
            name:"Peylan"
        },
        footer: {
            companyname:"Company Inc"
        }
    }
});
var aside = new Vue({
    store,
    "el":"aside",
    data:{},
    computed: {
        ...Vuex.mapState(['aside', 'footer'])
    }
});
var footer= new Vue({
    store,
    "el":"footer",
    data:{},
    computed: {
        ...Vuex.mapState(['aside', 'footer'])
    }
});
</script>

This demonstration provides a simplified demonstration. For more intricate usage (such as with getters, actions, and mutations), it is advisable to refer to Vuex's official documentation.

Alternatively, you could implement a computed property on both components, as shown below.

Keep in mind that this approach may introduce some challenges, which is why .$mount() is necessary in this scenario.

<script src="https://unpkg.com/vue"></script>

<aside><h3 v-text="footer.companyname"></h3>
</aside>
<footer>
    <input type="text" v-model="aside.name">
</footer>

<script>
var aside = new Vue({
    data:{
        name:"Peylan"
    },
    computed: {
        footer() { return footer; }
    }
});
var footer = new Vue({
    data:{
        companyname:"Company Inc"
    },
    computed: {
        aside() { return aside; }
    }
});
aside.$mount("aside");
footer.$mount("footer");
</script>

Leverage variables from different Vue components and link them together

Answer №1

Similar questions

Display a unique button and apply a strike-through effect specifically for that individual list item

Gatsby causing issues with Material UI v5 server side rendering CSS arrangement

Is it possible to trigger a function using an event on "Any specified selector within a provided array"?

React-navigation installation in React Native project failed due to ENOENT error - file or directory does not exist

Adding code snippets to VueJS components

Error with JavaScript callback functions

Sorting complex strings in Typescript based on the dates contained within them

Tips for resolving issues related to Nodemailer configuration

Different techniques to access values in a JSON array without relying on specific index positions

Downloading PDF files on IOS while using Angular often results in the PDF opening in the same

Is it possible to retrieve only the attributes in an array?

If the input is marked as checked, apply a class to the corresponding HTML element

When the mouse drags across the empty space, the force graph continually jumps

What causes an infinite loop in my app when passing a prop, and why doesn't it update the prop as expected?

Nested loops in JavaScript can be combined with promises to efficiently handle

Is it possible to attach a click handler to a ref?

Guide on how to retrieve a value using image.onload on the client side

Ways to implement CSS with javascript

Displaying default value in select dropdown using v-model

Tips for updating a React state while using the history API