The problem

Bug · Issue #434 · hug-Sun /element3 (github.com)

Problem reproduction

We copy demo to examples/play/index.vue and run yarn dev:play to check the problem.

Then we enter arbitrary characters in the input field, and the BUG reappears, we should give v-show=false for the following two el-inputs, but v-show=false suddenly does not work.

Then we look at the DOM element

What found that style disappeared??

What’s going on here

Knowledge supplement

V – show principle

Before we look at the problem let’s look at the implementation of V-Show

First let’s take a look at the official documentation

We can see that v-show sets the display style of the root element in the component to ‘None’ to achieve the hide effect

Note that vue3 allows you to fragment multiple elements in a template, but note that if you fragment multiple elements in a template, using v-show on a component has no effect!!

Not only does v-show have no effect, but the style property also has no effect.

It works if you put a div inside the test.vue template

Style of binding

There are three ways to dynamically bind styles

The first:

Style can be passed in an array, each element of which is a CSS style string or object.

The second:

Style can be passed in an object whose key is a CSS property and whose value is a CSS value.

The third:

Bind a string variable directly to the style. Note that this overrides the previous static inline style

Static binding allows you to write inline styles directly in style

It is important to note that dynamic binding and static inline styles can be used together

$attrs.style

This.$attrs is an attribute passed by the parent to the child component that is not defined in props

Problem analysis

Now let’s start by looking at the source code for the EL-Input component

When I opened input.vue I had a gut feeling there was something wrong with line 4.

And the fourth line of code is completely unnecessary. As we’ve seen before, writing a style when using the ElInput component can pass the style directly to the internal root element

This is where the problem arises, because here :style=”$attrs.style” is dynamically bound to style in the third way, when v-show=false, style is set to display: None when the component is first loaded

When the user enters a value in the first el-input, it updates all elements in the current component (in this case play/index.vue). When updating the component, vue takes the value of $attrs.style and assigns it to the div’s style. $attrs. Style is undefined, and undefined overwrites the inline style (if style is undefined or null). You can see the source code here), so bugs appear.

Problem analysis completed, we modify the code to test

The purpose of $attrs.style is to apply an external inline style to the div, but as previously analyzed,vue defaults to assigning the parent component’s style value to the first internal element. So we can just delete that sentence and that will do the trick, and we’ll try it out.

Ok,BUG fix completed

The last

When confronted with a problem, we first think about it according to our existing knowledge. When confronted with a blind spot of knowledge, we first check the official documents and then Google. We can submit an issue to ask questions if we cannot solve the problem. Element3 issues can be asked not only project questions but also JS questions, so be sure to submit as many issues as possible. Finally, I hope more people can join us and contribute to open source together.

Github.com/hug-sun/ele…