how to implement a two way binding between components that are not parent and child in Vue 3 js

Question

I'm using this free coffee API to fetch data.

Each coffee drink item is populated in a Vue Card component. The Card component has a counter: 0 that the user can increment() and decrement().

Card.vue

import {store} from '../store'
import {ref} from 'vue'
export default {
    data() {
        return {
            store,
            count: ref(0)
        }
    },
    props: ['drink'],
    methods: {
        decrement(){
            (this.count != 0) ? this.count-- : this.count = 0
            store.decrement(this.drink.title,this.drink.id,this.count)
        },
        increment(){
            this.count++
            store.increment(this.drink.title,this.drink.id,this.count)
        }
    },
}

I'm using the Reactivity API for state management.

Store.js(state management)

import { reactive, ref } from 'vue'

export const store = reactive({
    drinks : ref([]),

    increment(drinkName,id,count) {
        let drink = this.drinks.find(drink => drink.drinkID === id);

        if(drink) {
            drink.drinkCount = count
        } else {
            this.drinks.push({
                drinkID : id,
                drinkName : drinkName,
                drinkCount : count,
            })
        }
    },
    decrement(drinkName,id,count) {
        let drink = this.drinks.find(drink => drink.drinkID === id);
        if(drink) {
            drink.drinkCount = count
            if(drink.drinkCount == 0) this.drinks.splice(this.drinks.indexOf(drink),1);
        }
    },
    remove(id) {
        let drink = this.drinks.find(drink => drink.drinkID === id);
        if(drink) {
            drink.drinkCount = 0
            if(drink.drinkCount == 0) this.drinks.splice(this.drinks.indexOf(drink),1);
        }
    }
})

Finally, I have a Sidebar(shopping cart) component that uses the Reactivity API to reactively add coffee drinks to the cart based on the Changes on the Card component.

I implemented a remove button for the sidebar such that the remove() function will reset the count to zero and remove it from the cart. You can see the code in the Store.js section. The issue I am having is that everything is updated in the shopping cart and the item is removed as expected but nothing happens in the Card Component. The counter in the Card Component does not update.

note: that the Card Component and Sidebar Compnent do not have a parent and child relationship.

Here is a link for the codesandbox

That would be easier to debug and help if you tried to make a reproduction codesandbox :/ — Kapcash
– Kapcash, Commented Apr 8, 2022 at 16:02
thanks for the suggestion, here is a link for the sandbox: codesandbox.io/s/tender-bartik-rjxsx3 — Omar Bitar
– Omar Bitar, Commented Apr 8, 2022 at 16:28

Emir · Accepted Answer · 2022-04-08 18:31:01Z

2

each coffee has to possess its own count field. but you have count for each Card Component. also you're re-assigning HotView and IcedView components' state with fetching data in mounted() hook

I get it work here

answered Apr 8, 2022 at 18:31

Emir

1214 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to implement a two way binding between components that are not parent and child in Vue 3 js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related