Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Weird v-bind attribute merging

See original GitHub issue

Version

2.6.11

Reproduction link

https://codepen.io/wenfang/pen/VwaeOxW?editors=1111

Steps to reproduce

None

What is expected?

Since v-bind="{ foo: 'baz' }" is written after foo="bar", I expected the final DOM div has foo="baz"

What is actually happening?

The DOM div has foo="bar", is this intended?

Issue Analytics

State:
Created 3 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

posvacommented, Aug 16, 2020

Style and class have different behavior as the merge properties and dynamic ones have higher priority

1reaction

Justineocommented, Aug 14, 2020

I believe single attribute takes higher priority than the v-bind object binding. As it’s more specific.

Top Results From Across the Web

v-bind Merge Behavior breaking - Vue 3 Migration Guide

When dynamically binding attributes on an element, a common scenario involves using both the v-bind="object" syntax as well as individual attributes in the ......

How can I solve "Interpolation inside attributes has been ...

Use v-bind or shortcut syntax ':' to bind the attribute. Example: <input v-bind:placeholder="title"> <input :placeholder="title">.

<component> is not replaced when using v-bind={is - GitHub

Replacement can only work reliably if the presence of the is attribute is guaranteed. That is not the case when you are using...

v-bind Merge Behavior - Vue.js

When dynamically binding attributes on an element, a common scenario involves using both the v-bind="object" syntax as well as individual ...

Vue.js and HTML5 contenteditable attribute gotchas

Let's combine this feature with Vue.js application and provide a editable field with colored texts. HTML; CSS; JS.