[2.0] Backticks in class attribute not correctly compiled

Vue.js version

2.0.0-rc.2

Reproduction Link

https://github.com/robinvdvleuten/vue-bug

Steps to reproduce

Clone and install repository then run npm run build to get uglify error.

What is Expected?

I expect that the backtick expression is correctly compiled to ES5 Javascript.

What is actually happening?

If I have the following Vue component:

<template>
  <div id="app" :class="{ [`class-${test}`]: true }">
    Hello, Vue 2.0!
  </div>
</template>

<script>
  export default {
    data () {
      return {
        property: 'test'
      }
    }
  }
</script>

The template parser doesn’t seem to recognize the expression and generates the following (reproducible by running npm run build:without-uglify):

module.exports={render:function(){with(this) {
  return _h('div', {
    class: {
      [`class-${test}`]: true
    },
    attrs: {
      "id": "app"
    }
  }, ["\n  Hello, Vue 2.0!\n"])
}},staticRenderFns: []}

Which causes Uglify to throw the error;

ERROR in bundle.js from UglifyJs
Unexpected character '`' [bundle.js:5089,7]

[LinusBorg]

Ok, reopening this. It actually works with the standalone build: https://jsfiddle.net/Linusborg/chw886jk/1/

So it should work with runtime-only and precomiled templates. Seems like a bug indeed.

Sorry for the premature close.

[robinvdvleuten]

@yyx990803 thanks for the explanation! I’ve fixed it by moving the class generation to a component’s method.