Version

3.2.4

Reproduction link

https://jsfiddle.net/robedgenius/mfwnuhag/40/

Steps to reproduce

Two text boxes which use an array to bind styles. The inline style of the first input box is hidden and updated to be visible using JS. Clicking the "hideC2" button modifies the background of the second text box, but the “display" of the first text box is reset to "none".

I created a similar example, https://jsfiddle.net/robedgenius/j5qnv984/9/, but bind to the singular attribute "disabled" (the first example, whose binding is an array). The style update of the second input box does not affect the first one though.

What is expected?

Update the background style of the second text input, it should not affect the display attribute of the first input, whatever the display attribute is inline or modified by external JS.

What is actually happening?

Binding styles that have no value change should not be affected.

This is expected because you modified manually the style of the element instead of using a reactive value:

document.getElementById('text1').style.display="block"

Vue cannot be aware of this change and sets the display to none as specified in the template.

Remember to use the forum or the Discord chat to ask questions!

@posva then why second example, Vue is aware of this "document.getElementById('text1').disabled= false"?

I don't think the problem is aware or not, the problem is Vue update an array, the array updates an irrelevant attribute.

Also, Vue2 seems working as expected, it won't change display=block to display=none.