Vue.js 2.0 - Interpolation inside attributes are deprecated

mul14

As state in https://github.com/vuejs/vue/issues/2873, the Interpolation inside attributes are deprecated. On 1.x we can do something like this:

<ul v-for="list in lists">

  <li id="list-{{ $index }}"> {{ $index }} </li>

</ul>

How to achieve same result on 2.0 ?

Is this only way to achieve that?

<li :id="'list-{{' + $index + '}}'">

Note: We don't talk ES6 template string, because not all browser support that feature yet.

kaorun343

Hello.
Did you try this?

<li :id="'list-'+$index">{{$index}}</li>

decademoon

This might be overkill for your example, but in scenarios where the property value is a more complex javascript object (instead of just a simple string concatenation) you can do things like this instead:

<li :id="itemId($index)">{{$index}}</li>

...
methods: {
  itemId(index) {
    return `list-${index}`;
  },
},
...

Now the logic says in the javascript instead of the template.