transfer the value of a method to a different component

Question

transfer the value of a method to a different component

In my Component called IncomeList, there is a method named sumValue. This method simply adds different numbers together to produce one value, for example 3+5 = 8. Similarly, in another Component named OutputList, the same logic is applied but with a method called sumValueOutput. Now, I want to utilize both values in a new component named WinTotal. I've attempted using props and Vuex, however, I haven't been successful so far and I'm unsure where to begin. Thank you for your assistance!

IncomeList:

<template>
<div class="container-income">
    <button class="btn btn-info" @click="showModal">show modal</button>
    <div class="hidden-container-income" id="test123">
    <input type="text" class="income-input" placeholder="What needs to be done" v-model="newIncome" @keyup.enter="addincome">
    <input type="text" class="value-input" placeholder="€" v-model="newIncomeValue" @keyup.enter="addValue">
    <transition-group name="fade" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
        <income-item v-for="income in incomesFiltered" :key="income.id" :income="income"
                   @removedIncome="removeincome">
        </income-item>
    </transition-group>

    <div class="extra-container">
        <div><label><input type="checkbox" style="display: none" :checked="!anyRemaining" @change="checkAllincomes"></label></div>
        <div>{{ remaining }} elements</div>
    </div>
    <div class="sum-container">
        <div><label> Total Income: </label></div>
        <div>{{ sumValue }} €</div>
    </div>
  </div>
</div>
    </template>
    <script>
    import IncomeItem from './IncomeItem'
    export default {
    name: 'income-list',
    components: {
        IncomeItem,
    },
    data () {
        return {
            newIncome: '',
            newIncomeValue: '',
            idForincome: 3,
            incomes: [
                {
                    'id': 1,
                    'title': 'Finish Vue Screencast',
                    'value': 300,
                    'completed': false,
                    'editing': false,
                },
                {
                    'id': 2,
                    'title': 'Take over world',
                    'value': 315,
                    'completed': false,
                    'editing': false,
                },
                {
                    'id': 3,
                    'title': 'Excellent',
                    'value': 313,
                    'completed': false,
                    'editing': false,
                },
            ]
        }
    },
    computed: {
        remaining() {
            return this.incomes.filter(income => !income.completed).length
        },
        anyRemaining() {
            return this.remaining != 0
        },
        incomesFiltered() {
            return this.incomes
        },
        sumValue() {
            return this.incomesFiltered.reduce((a, c) => a + c.value, 0)
        },
    },
    methods: {
            addincome() {
                if (this.newIncome.trim().length == 0) {
                    return
                }
                this.incomes.push({
                    id: this.idForincome,
                    title: this.newIncome,
                    value: this.newIncomeValue,
                    completed: false,
                })
                this.newIncome = ''
                this.newIncomeValue = ''
                this.this.idForincome++
            },

        removeincome(id) {
            const index = this.incomes.findIndex((item) => item.id == id)
            this.incomes.splice(index, 1)
        },
        checkAllincomes() {
            this.incomes.forEach((income) => income.completed = event.target.checked)
        },
        clearCompleted() {
            this.incomes = this.incomes.filter(income => !income.completed)
        },
        finishedEdit(data) {
            const index = this.incomes.findIndex((item) => item.id == data.id)
            this.incomes.splice(index, 1, data)
        },
        //Same for Value
        addValue() {
            if (this.newIncomeValue.trim().length == 0) {
                return
            }
            this.incomes.push({
                id: this.idForincome,
                title: this.newIncome,
                value: this.newIncomeValue,
                completed: false,
            })
            this.newIncome = ''
            this.newIncomeValue = ''
            this.this.idForincome++
        },
        showModal () {
            if (document.getElementById('test123').style.display == 'none' ) {
                document.getElementById('test123').style.display = 'block';
            }
            else {
                
                
document.getElementById('test123').style.display = 'none'
            }
        },
    },
};
                               </script>

OutputList:

<template>
<div class="container-output1">
    <button class="btn btn-info1" @click="showModal">show modal</button>
    <div class="hidden-container-output1" id="test1231">
        <input type="text" class="output-input1" placeholder="What needs to be done" v-model="newOutput" @keyup.enter="addoutput">
        <input type="text" class="value-input1" placeholder="€" v-model="newOutputValue" @keyup.enter="addValue">
        <transition-group name="fade" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
            <output-item v-for="output in outputsFiltered" :key="output.id" :output="output"
                         @removedoutput="removeOutput">
            </output-item>
        </transition-group>

        <div class="extra-container1">
            <div><label><input type="checkbox" style="display: none" :checked="!anyRemaining" @change="checkAlloutputs"></label></div>
            <div>{{ remaining }} elements</div>
        </div>
        <div class="sum-container1">
            <div><label> Total Output: </label></div>
            <div>{{ sumValueOutput }} €</div>
        </div>
    </div>
</div>
   </template>

   <script>
import OutputItem from './OutputItem'
export default {
    name: 'output-list',
    components: {
        OutputItem,
    },
    data () {
        return {
            newOutput: '',
            newOutputValue: '',
            idForOutput: 3,
            outputs: [
                {
                    'id': 1,
                    'title': 'Finish Vue Screencast',
                    'value': 300,
                    'completed': false,
                    'editing': false,
                },
                {
                    'id': 2,
                    'title': 'Take over world',
                    'value': 315,
                    'completed': false,
                    'editing': false,
                },
                {
                    'id': 3,
                    'title': 'Excellent',
                    'value': 311,
                    'completed': false,
                    'editing': false,
                },
            ]
        }
    },
    computed: {
        remaining() {
            return this.outputs.filter(output => !output.completed).length
        },
        anyRemaining() {
            return this.remaining != 0
        },
        outputsFiltered() {
            return this.outputs
        },
        sumValueOutput() {
            var outputValue = this.outputsFiltered.reduce((a, c) => a + c.value, 0);
            return outputValue;
        },
    },
    methods: {
        addOutput() {
            if (this.newOutput.trim().length == 0) {
                return
            }
            this.outputs.push({
                id: this.idForOutput,
                title: this.newOutput,
                value: this.newOutputValue,
                completed: false,
            })
            this.newOutput = ''
            this.newOutputValue = ''
            this.this.idForOutput++
        },

        removeOutput(id) {
            const index = this.outputs.findIndex((item) => item.id == id)
            this.outputs.splice(index, 1)
        },
        checkAlloutputs() {
            this.outputs.forEach((output) => output.completed = event.target.checked)
        },
        clearCompleted() {
            this.outputs = this.outputs.filter(output => !output.completed)
        },
        finishedEdit(data) {
            const index = this.outputs.findIndex((item) => item.id == data.id)
            this.outputs.splice(index, 1, data)
        },
        //Same for Value
        addValue() {
            if (this.newOutputValue.trim().length == 0) {
                return
            }
            this.outputs.push({
                id: this.idForOutput,
                title: this.newOutput,
                value: this.newOutputValue,
                completed: false,
            })
            this.newOutput = ''
            this.newOutputValue = ''
            this.this.idForOutput++
        },
        showModal () {
            if (document.getElementById('test1231').style.display == 'none' ) {
                document.getElementById('test1231').style.display = 'block';
            }
            else {
                document.getElementById('test1231').style.display = 'none'
            }
        }

    }
}
            </script>

javascript vue.js vuex

Answer 1

Answer №1

There are a couple of effective ways to pass data between components in Vue:

1) Using a Bus

In Vue, you can easily pass data from a child component to its parent by emitting events. Simply emit the data in the child component:

this.$emit('event-name', payload)

And listen for the event in the parent to receive the data:

<child-component @event-name="doSomething($event)" />

However, passing data directly between two components can be challenging. One workaround is to create a shared instance called a Bus, which allows you to emit events between the components.

Creating a Bus is simple and requires only a few lines of code:

// Bus.js
import Vue from "vue";

export const Bus = new Vue();

In your child components (IncomeList and OutputList), import the Bus and emit events with the desired values:

import { Bus } from "@/Bus";

sumValue() {
    const sumVal = this.incomesFiltered.reduce((a, c) => a + c.value, 0);
    Bus.$emit("sumvalue-change", sumVal);
    return sumVal;
}

In the WinTotal.vue component, import the Bus and listen for these events within the created hook:

created() {
    Bus.$on("sumvalue-change", (sumvalue) => (this.sumValue = sumvalue));
}

You can now use the updated values in WinTotal as needed. Check out this sandbox for a demonstration.

2) Utilizing VueX

An alternative solution is to leverage VueX for passing data between components. If you're familiar with VueX, this method may be simpler to implement compared to using a Bus.

Create state values for sumValueIncome and sumValueOutput in your store, and mutations to update them:

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    sumValueIncome: null,
    sumValueOutput: null
  },
  mutations: {
    updatesumValueIncome(state, newvalue) {
      state.sumValueIncome = newvalue;
    },
    updatesumValueOutput(state, newvalue) {
      state.sumValueOutput = newvalue;
    }
  },
});

In IncomeList and OutputList, update the values using VueX mutations:

sumValueIncome() {
  const sumValueIncome = this.incomesFiltered.reduce((a, c) => a + c.value, 0);
  this.$store.commit("updatesumValueIncome", sumValueIncome);
  return sumValueIncome;
}

In WinTotal, utilize the mapState helper to access the dynamically updated values:

<script>
import { mapState } from "vuex";

export default {
  computed: mapState(["sumValueIncome", "sumValueOutput"]),
};
</script>

By following these steps, you can effectively pass and manage data between components using VueX. Take a look at this sandbox for a practical example of this approach.

Answer 2

There are a couple of effective ways to pass data between components in Vue:

1) Using a Bus

In Vue, you can easily pass data from a child component to its parent by emitting events. Simply emit the data in the child component:

this.$emit('event-name', payload)

And listen for the event in the parent to receive the data:

<child-component @event-name="doSomething($event)" />

However, passing data directly between two components can be challenging. One workaround is to create a shared instance called a Bus, which allows you to emit events between the components.

Creating a Bus is simple and requires only a few lines of code:

// Bus.js
import Vue from "vue";

export const Bus = new Vue();

In your child components (IncomeList and OutputList), import the Bus and emit events with the desired values:

import { Bus } from "@/Bus";

sumValue() {
    const sumVal = this.incomesFiltered.reduce((a, c) => a + c.value, 0);
    Bus.$emit("sumvalue-change", sumVal);
    return sumVal;
}

In the WinTotal.vue component, import the Bus and listen for these events within the created hook:

created() {
    Bus.$on("sumvalue-change", (sumvalue) => (this.sumValue = sumvalue));
}

You can now use the updated values in WinTotal as needed. Check out this sandbox for a demonstration.

2) Utilizing VueX

An alternative solution is to leverage VueX for passing data between components. If you're familiar with VueX, this method may be simpler to implement compared to using a Bus.

Create state values for sumValueIncome and sumValueOutput in your store, and mutations to update them:

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    sumValueIncome: null,
    sumValueOutput: null
  },
  mutations: {
    updatesumValueIncome(state, newvalue) {
      state.sumValueIncome = newvalue;
    },
    updatesumValueOutput(state, newvalue) {
      state.sumValueOutput = newvalue;
    }
  },
});

In IncomeList and OutputList, update the values using VueX mutations:

sumValueIncome() {
  const sumValueIncome = this.incomesFiltered.reduce((a, c) => a + c.value, 0);
  this.$store.commit("updatesumValueIncome", sumValueIncome);
  return sumValueIncome;
}

In WinTotal, utilize the mapState helper to access the dynamically updated values:

<script>
import { mapState } from "vuex";

export default {
  computed: mapState(["sumValueIncome", "sumValueOutput"]),
};
</script>

By following these steps, you can effectively pass and manage data between components using VueX. Take a look at this sandbox for a practical example of this approach.

transfer the value of a method to a different component

Answer №1

1) Using a Bus

2) Utilizing VueX

Similar questions

Can JSON encoding in a URL pose a risk of XSS attacks?

Refresh the calendar to retrieve updated information

Adjusting font sizes in JavaScript causes the text to resize

Guide to aligning the orientation of an object with a given normal vector using three.js

What is the reason behind Firefox failing to display a linear gradient when the background-size values are more than 255px?

Exploring new classes with jQuery's .not() and :not()?

Retrieve the selected option from the dropdown menu in the specified form

Ways to invoke a function within a React Material-UI component

Modify the width of the progress bar in Bootstrap using AngularJS

Issue with Google Maps iFrame not loading when utilizing JavaScript variables in the "src" attribute

Custom AngularJS directive that permits only alphabetic characters, including uppercase letters and the ability to input spaces

Next.js project encountered a TypeError with message [ERR_INVALID_ARG_TYPE]: The "to" argument is expected to be a string type

How can you transform a nested array into a flat JavaScript map?

What could be causing the issue of CSS animation not functioning properly when used in conjunction with a

What is the best way to ensure that my image completely occupies the div?

How to use Javascript to pause an HTML5 video when closed

Instructions for resolving the Sys.ArgumentTypeException error: The object of type 'Object' cannot be converted to type 'Function'

Content in React Router may fail to load when refreshing the page, navigating forward, or manually

Can you explain the exact meaning of XMLHttpRequest.XMLHttpRequest?

Capture data from Ajax requests and store them in PHP variables