# v-bind Merge Behavior
breaking

# Overview

  • BREAKING: Order of bindings for v-bind will affect the rendering result.

# Introduction

When dynamically binding attributes on an element, a common scenario involves using both the v-bind="object" syntax as well as individual properties in the same element. However, this raises questions as far as the priority of merging.

# 2.x Syntax

In 2.x, if an element has both v-bind="object" and an identical individual property defined, the individual property would always overwrite bindings in the object.

<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="red"></div>
1
2
3
4

# 3.x Syntax

In 3x, if an element has both v-bind="object" and an identical individual property defined, the order of how the bindings are declared determines how they are merged. In other words, rather than assuming developers want the individual property to always override what is defined in the object, developers now have more control over the desired merging behavior.

<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="blue"></div>

<!-- template -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- result -->
<div id="red"></div>
1
2
3
4
5
6
7
8
9

# Migration Strategy

If you are relying on this override functionality for v-bind, we currently recommend ensuring that your v-bind attribute is defined before individual properties.

Migration build flag: COMPILER_V_BIND_OBJECT_ORDER

Deployed on Netlify.
Last updated: 2021-06-07, 16:47:59 UTC