link548 link549 link550 link551 link552 link553 link554 link555 link556 link557 link558 link559 link560 link561 link562 link563 link564 link565 link566 link567 link568 link569 link570 link571 link572 link573 link574 link575 link576 link577 link578 link579 link580 link581 link582 link583 link584 link585 link586 link587 link588 link589 link590 link591 link592 link593 link594 link595 link596 link597 link598 link599 link600 link601 link602 link603 link604 link605 link606 link607 link608 link609 link610 link611 link612 link613 link614 link615 link616 link617 link618 link619 link620 link621 link622 link623 link624 link625 link626 link627 link628 link629 link630 link631 link632 link633 link634 link635 link636 link637 link638 link639 link640 link641 link642 link643 link644 link645 link646 link647 link648 link649 link650 link651 link652 link653 link654 link655 link656 link657 link658 link659 link660 link661 link662 link663 link664 link665 link666 link667 link668 link669 link670 link671 link672 link673 link674 link675 link676 link677 link678 link679 link680 link681 link682 link683 link684

[Vue.js] can I pass a value to a sibling component without saving it as a variable? Subscribe to RSS

there is some bootstrap vue.js cards with a v-for statement, one of my tags returns a value based on the current iteration of v-for. to pass this value to another tag, if I save it as a variable before passing it then all iterations end up sharing the same variables but I don’t want that.

<b-card-group v-for=”(element, i) in array” :key=”index”>
<tag @update=”updateFunction()” />
<otherTag />
<b-card />
<b-card-group />

the variable to be specific to the current iteration so future iterations won’t have access to it.

Solution :

You are basically asking two questions, so when going to answer them in turn.

The main problem you seem to have is that you do not know how to differentiate between each card in the updateFunction function. The easiest way to make the updateFunction context-aware, is by putting an arrow function that takes one argument, and calls updateFunction with two arguments.

the update handler would look something like this. You take the index of the card you are trying to update, and the value that was sent from a sibling.

methods: {
handleUpdate(index, val) {
this.$set(, index, val);

You then use an arrow function to make the update handler context-aware:

<tag @update=”(value) => handleUpdate(index, value)” />

As for the question in the title of the problem description: If you are passing a value as a prop, you have two options. You either put a literal in the prop (e.g. :my-prop=”5”), or you put a variable in the prop (e.g. :my-prop=”myVariable”). The first one obviously doesn’t allow you to change the value, so that is not very useful here. The second one pulls the data directly from the state of the parent component. It is thus not possible to pass data as a prop without it being saved in the parent component.

As shown above, that doesn’t mean you can’t have different data for different iterations of the v-for though.

There are other methods of sharing data between siblings, which is especially useful in larger applications, by using a vuex store. This will allow you to abstract away data in useful “chunks” (or modules), allowing you to interact with it using getters, mutations and actions. You can find more information using the official documentation.