Vue: Including Prototype 1.7 causes vuejs to fail

[greatwitenorth]

Vue.js version

2.2.1

Reproduction Link

https://jsfiddle.net/xbzh5ez4/

Steps to reproduce

I click the top dropdown and select 21WFDT 22x102

What is Expected?

I expect the bullet point below to update to 25.7 Cubic Yards

What is actually happening?

The value stays on 21.3 Cubic Yards and I see an exception thrown in the inspector:

Uncaught TypeError: this.each is not a function
    at HTMLOptionsCollection.findAll (prototype.js:883)
    at change (eval at makeFunction ([email protected]:8815), <anonymous>:2:405)
    at HTMLSelectElement.invoker ([email protected]:1641)
findAll @ prototype.js:883
change @ VM708:2
invoker @ [email protected]:1641

If I remove Prototype, vuejs works and expected and no exception is thrown.

[posva]

Please, make sure to boil down the code to the minimal necessary when providing a repro, it really helps us. eg You have errors in your fiddle that are unrelated to what you're reporting.

Prototype.js overrides prototype methods, so I'd say it's quite normal for modern libs to not work with it...

[greatwitenorth]

Yes sorry about that, I've updated the link with the selected attribute removed.

The issue is that Prototype is used by around 250K websites running Magento 1. Does this mean that there's no way Magento 1 users will be able to use Vue in their site?

I'm hoping that there's some kind of workaround as it's a fantastic library that many older projects and frameworks could benefit from.

[posva]

Not sure, we have to check what's the problem. In the worst case it's
possible to monkey patch prototype.js. So it should be ok

On Wed, 8 Mar 2017, 21:09 Nick Verwymeren, [e-mail] wrote:

Yes sorry about that, I've updated the link with the selected attribute
removed.

The issue is that Prototype is used by around 250K websites running
Magento 1. Does this mean that there's no way Magento 1 users will be able
to use Vue in their site?

I'm hoping that there's some kind of workaround as it's a fantastic
library that many older projects and frameworks could benefit from.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/5139#issuecomment-285154046, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAoicQiMj0N2PdA-6RL5cqKDuaexWIXRks5rjwrbgaJpZM4MXJiq
.

[posva]

It seems that prototype breaks Array's filter. Here's a fixed version by restoring it. Maybe there's a way of doing this with prototype but I don't know how: https://jsfiddle.net/f909onjf/

[dmto]

This can be resolved by updating prototype.js to at least version 1.7.1.