This reference is undefined in template's v-for loops

[gewoonwoutje]

Version

2.6.10

Reproduction link

https://jsfiddle.net/caxzegtw/

Steps to reproduce

• Look at the two this pointers; only one is working

What is expected?

This pointer should refer to the Vue instance.

What is actually happening?

In the fiddle; the this.message is not showing inside the v-for.
In our project; this is undefined and throws an error in the console.

[posva]

Never use this in templates

[gewoonwoutje]

Never use this in templates

Where is that defined/ documented? If that is so important, why isn't it enforced?

[maj625]

if you still having the issue here is a workaround I'm using.
in your data add a variable like myRef: this and use myRef in the v-for loop instead of this

[WhereJuly]

@gewoonwoutje You could access the parent scope with either $data. Or with $props if you want to access something from event farther outer scopes. $methods do not work and I did not try to access a parent scope's computed.

Here is an example based on your fiddle:

  <ul>
    <!-- `this` is undefined but `$data` and `$props` give access to the outside scope of v-for -->
    <li v-for="item in items">
        <p>{{ item }}:{{ $data.message }}</p>
        <p>{{ $props.someprop }}</p>
    </li>
  </ul>