"Show Me a Demo" doesn't work

[oaleynik]

Steps to reproduce:

1. Open http://motif.imgix.com/
2. Click on "Show Me a Demo"

Result: https://www.dropbox.com/s/78tcn6qy9651zp5/Screenshot%202016-03-19%2017.51.45.png?dl=0

1. Let's Go! button disappears and "Show Me a Demo" button stays
2. No results shown

Expected:

1. Both button replaced with the "Start Over"
2. Results shown for the random link

[oaleynik]

The simple way to fix it is replace props with data in OgBuilder. In this case Vue will be able to properly proxy all the properties and replacing $data will work. With props replacement of the $data property will not work (Vue will not "re-proxy" properties from the new data object, so existing proxied properties will be returning value from the getter closure). Downside is - no data validation (however, it can be worked around with https://github.com/vuejs/vue-validator or with something like https://github.com/hapijs/joi)

Another way is instead of replacing the $data reference - assign the new values through existing proxied properties. For example, Object.assign(this, selectedData). Downside of such approach is - if we will need to assign not existing (not proxied) value - change detection will not work for it.

I guess optimum way to do this will be combination of the props and data. Props can be named in format og-url, og-text-alignment, etc. and considered as the initial state of the component. In this case $data can be effectively replaced, change detection will work as expected and flexibility in declarative component configuration through properties will not be lost.

[paulstraw]

I'm looking into this. Oddly, I can't replicate it locally.

[oaleynik]

Just in case - screen recording: https://www.dropbox.com/s/o9j7uk1p0p5u3e5/motif.show-me-a-demo.mov?dl=0

I can reproduce it in Chrome, Chrome Canary, Safari, FF and FF Nightly Build (as well as mobile Chrome and Safari); locally and on motif.imgix.com

[paulstraw]

Do you get anything in your console in the local version? I'm only able to replicate on motif.imgix.com, and no console output there.

[oaleynik]

Nothing.

[paulstraw]

I'm able to replicate locally with a fresh checkout, so there's something very strange going on.

[oaleynik]

Ha! I guess something changed in Vue in between 1.0.16 and 1.0.18. With 1.0.16 it works like a charm!

Update: works with 1.0.17 too, so something changed in 1.0.18

[paulstraw]

After digging through Vue issues a bit, seems like 1.0.18 may have some regressions. I've pinned the Vue dependency at 1.0.17 for now, which works fine. Thanks for the bug report @oaleynik!

[oaleynik]

Related Vuejs issue - vuejs/vue#2520

[oaleynik]

@paulstraw FYI vuejs/vue#2520 (comment)