Text in select box with v-model (most of the time) does not update, but value does

[jcat4]

Version

2.5.17

Reproduction link

https://jsfiddle.net/jcatfour/g6ykuwhe/

Steps to reproduce

Try to change the dropdown value. The text displayed in the select box will almost always stay as "Today", despite the value changing, though it SOMETIMES will actually change to the correct value. Again, as you can see, the actual value is indeed changing even if the select box does not show it.

What is expected?

The options in the select are based on an array of value pairs, (text, val). The text is what should be shown in the select, and the val is what should be actually passed and stored in the data object. I expect the text to change as well as the value when selecting an option.

What is actually happening?

The value changes every time, but the text mostly stays unchanged, BUT the text does very rarely change as expected.

---

If this were CONSISTENTLY showing the wrong text with the right value, I would assume that I am just doing something wrong, but since it's infrequent, I'm now not so sure. I would not be surprised if I was doing something wrong. I am going insane, please be my savior.

[jcat4]

Apologies, one last thing: If I have a literal object array in the component's data object, then it seems to work fine. If I use a store or a mixin or anything like that to retrieve an object array, this issue persists.

[posva]

Don't use this in template, just do getDates

[jcat4]

That doesn't fix the problem, though...

https://jsfiddle.net/jcatfour/32xea1bL/

[posva]

So the problem comes from looseEqual comparing plain objects, Dates are not compared correctly and it looks like they are all the same (using that function) so the first option is always the one selected. You can, however, pass the whole object as the value to the option.

[jcat4]

Hmm, okay, yeah. Binding item instead of item.val to the options works. Is looseEqual something that's in Vue's source, or a JS thing? How'd ya figure it out? I was going insane over this!!

Edit: Just checked the source. Yep, it's there.

Thanks, dude!!

[posva]

I'm not sure this is intentional, I'll come back once I know 🙂

[KaelWD]

vuetifyjs/vuetify#4638 😛

[zzuligy]

the loosEqual implementation had defect.
if as comment check two object have the same shape.

a = {x:1},b={x:2} should looseEqual, but it's not.

so looseEqual is not consistent.

for the model directive, when the value is type of the regexes, sets,maps,array buffers,typed arrays etc,there will be a insane.

so, the implementation of looseEqual must think twice.(the acurate version will be more complex)

[posva]

This is actually a duplicate of #7928 and I already submitted a PR for it 😆