CODEWITHSUNDEEP
vue.js
Mario Ada
Mario Ada

Reputation: 23

How do I update parent div of component in vue.js

I was just wondering if this is even possible, lets assume I have this code here:

<div v-for="tile in container" v-bind:class="proper-class">
    <tile :tile='tile' @update="update-class"></tile>
</div>

I want to change the css class of the parent div when a variable inside of the component changes.

I know we should use $emit but we have a v-for in here, so we're creating multiple components, the $emit callback will update proper-class BUT this will update the css class of ALL the parents and not just the parent of the component that issued the update event.

What could be a solution to this?

Thanks in advance.

Upvotes: 2

Views: 1352

Answers (1)

Brian Lee
Brian Lee

Reputation: 18197

You can use the sync modifier to create a two way binding between the parent and child. It's nothing more than syntactic sugar for the child component emitting an event back to the parent with the desired payload.

this.$emit('update:propName', payload)

Vue sync modifier

Upvotes: 1

Related Questions