Sharing information between two different sections

Question

Sharing information between two different sections

In component1.vue, the code looks like this:

  export default {
    data () {
      return {
        editItemNumber: null,
        editBreakdownNumber: null
      }
    }

Meanwhile, in component2.vue, there is a table that is filled with an array of items.

Within that table, there is an edit button. Each row in the table has an itemNumber value, which needs to be assigned to the editItemNumber in component1.vue when that particular row is clicked.

<b-table show-empty bordered striped hover :items="itemTableList" :fields="fields">
  <template slot="actions" scope="row">
<b-btn variant='success' size="sm" @click.stop="edit(row.item,row.index,$event.target)">Edit</b-btn>
</template>
</b-table>

Originally, all of this functionality was on one component and I simply called an edit function that repopulated the v-models with the contents of the selected row. But now that everything is split among components, I am unsure how to modify it to achieve my current task.

I have limited experience with JavaScript, Vue, and web development in general. As a .NET developer who has been asked to assist with web projects, I am struggling to adapt. Any guidance would be greatly appreciated.

javascript vue.js vue-component

Answer 1

Answer №1

When it comes to transferring data between components, using events is the recommended approach.

Typically, you would utilize props to send data from a parent component to a child component, and use events to transmit data from a child back up to its parent.

For instance, the edit method of C2 could look something like this:

edit(item, index, target) {
    const payload = {
        item,
        index,
        target
    };

    this.$emit('edit', payload);
}

Subsequently, you just need to listen for that event in C1. Take note of the @edit attribute: this signifies that when the edit event is triggered from component-one, execute my "edit" method.

<template>
<div>
   <p>{{ editItemNumber }}</p>
  <component-two @edit="edit" />
</div>

<script>
export default {
data () {
  return {
    editItemNumber: null,
    editBreakdownNumber: null
  };
},

methods: {
    edit(eventPayload) {
        this.editItemNumber = eventPayload.item.editItemNumber
    }
}
</script>

If both C1 and C2 are children components of the same parent P, the concept remains similar. However, C1 cannot directly listen to C2. Instead, P will be the one listening for the edit event and conveying the necessary changes down to C1 through its props.

The documentation on Vue components is highly informative, especially the sections covering props and custom events. https://v2.vuejs.org/v2/guide/components.html

Answer 2

When it comes to transferring data between components, using events is the recommended approach.

Typically, you would utilize props to send data from a parent component to a child component, and use events to transmit data from a child back up to its parent.

For instance, the edit method of C2 could look something like this:

edit(item, index, target) {
    const payload = {
        item,
        index,
        target
    };

    this.$emit('edit', payload);
}

Subsequently, you just need to listen for that event in C1. Take note of the @edit attribute: this signifies that when the edit event is triggered from component-one, execute my "edit" method.

<template>
<div>
   <p>{{ editItemNumber }}</p>
  <component-two @edit="edit" />
</div>

<script>
export default {
data () {
  return {
    editItemNumber: null,
    editBreakdownNumber: null
  };
},

methods: {
    edit(eventPayload) {
        this.editItemNumber = eventPayload.item.editItemNumber
    }
}
</script>

If both C1 and C2 are children components of the same parent P, the concept remains similar. However, C1 cannot directly listen to C2. Instead, P will be the one listening for the edit event and conveying the necessary changes down to C1 through its props.

The documentation on Vue components is highly informative, especially the sections covering props and custom events. https://v2.vuejs.org/v2/guide/components.html

Sharing information between two different sections

Answer №1

Similar questions

Placeholder for empty values in Angular UI mask

Having trouble with AJAX integration when adding two products to the cart? Looking for a solution to resolve this issue?

Ending the loop of a jQuery JSON array when reaching the final row

code snippet for callback function in javascript

Unable to make a successful POST request using the JQuery $.ajax() function

Using asp.net and c# in tandem with javascript is a powerful

The challenge of vertically aligning text in a dynamically generated div

obtain the $http service and make a request

Can you explain how to create a function in Angular that accepts a number as an argument and then returns the square of that number?

Using Vue to pass the v-for index from a parent component to a child component

Exploring Data Retrieval and Presentation in React JS

Invoking a PHP function file through Ajax

Issue with displaying JavaScript file path on master page in ASP.NET resulting in a 404 error status

Server request successful, but CORS error occurs in browser

"Discover the step-by-step process for customizing the icon colors within Bootstrap components

Move a div in front of a fade-toggle

Having difficulty requesting an API in Next.js that relies on a backend cookie

Differences between variable scope in Node.js and web browsers when running JavaScript code

The catch block seems to be failing to capture the errors thrown by the fetch API

What is the best way to compare the previous and next values in React?