Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ES6 template string #2364

Closed
yukulele opened this issue Feb 18, 2016 · 10 comments
Closed

ES6 template string #2364

yukulele opened this issue Feb 18, 2016 · 10 comments

Comments

@yukulele
Copy link

Vue.js don't support es6 template string

<div :style="{transform:`rotate(${angle}deg)`}">

example:
http://codepen.io/yukulele/pen/KVLKoO

@posva
Copy link
Member

posva commented Feb 18, 2016

I don't know if this can be easily implemented but, why should vue support an es6 feature, knowing that it isn't yet supported on most mobile devices (http://kangax.github.io/compat-table/es6/#test-template_strings)?

@yyx990803
Copy link
Member

Note the fix only handles expression getter generation - it would still only work in Browsers that support template strings natively.

@yukulele
Copy link
Author

yukulele commented Apr 8, 2016

thank you!

It works but only support one placeholder

it works for my first exemple,

<div :style="{transform:`rotate(${angle}deg)`}">

but not this one

<div :style="{transform:`translate(${x}px, ${y}px)`}">

@jankjn
Copy link

jankjn commented Jun 18, 2016

@yukulele Looks 1.0 still not support multi placeholder template string but 2.0 fix this
@yyx990803 Hope to fix this in 1.0, thanks.

@yukulele
Copy link
Author

It works !
http://codepen.io/yukulele/pen/KVLKoO

thank you !

@booxood
Copy link

booxood commented Sep 8, 2016

Mark...

@jingsam
Copy link
Contributor

jingsam commented Oct 27, 2016

We can not use expressions with ES6 syntax in templates unless browsers support it, for the reason that babel can not extract out these expressions and transform them into ES5.

As I know, in vue 2.0, we can precompile templates into rendering functions in the backend. So, I want to know if it is possible to use babel to transform ES6 expressions into ES5? How do you think about it? @yyx990803 @posva

@jingsam
Copy link
Contributor

jingsam commented Oct 27, 2016

I made a simple test with Vue 2.0. I noticed that babel can properly transform ES6 expressions into ES5. It's great and one more benefits to use Vue 2.0 instead of Vue 1.0. Sorry to disturb.

@gaby64
Copy link

gaby64 commented Apr 21, 2020

filters dont work inside an es6 template string

<a :href="`/url/${test | myfilter}`">

@posva
Copy link
Member

posva commented Apr 21, 2020

@gaby64 filters can only be used at the end of the expression: https://vuejs.org/v2/guide/filters.html

Locking this very old thread

@vuejs vuejs locked as resolved and limited conversation to collaborators Apr 21, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants