Accessing v-for loop vars from v-runtime-template

[hannesaasamets]

Is it possible to use the v-for variables inside the v-runtime-template along the following lines:

<div v-for="row in rows">
  <v-runtime-template :template="'<p>{{row}}</p>'" />
</div>

https://codesandbox.io/s/01l5j73k90

[damey2011]

it doesnt work for me too

[alexjoverm]

I don't think that's possible, since the row variable scope is created by the template as a "temporary" scope, but v-runtime-template has access only to the component scope.

As a workaround you can create a component for the items on the list. In that way, the row would be in the component scope:

<Row :row="row" v-for="row in rows">

[alexjoverm]

Or even to place the for loop within the template:

<template>
  <div id="app">
    <v-runtime-template :template="tmplt2" />
  </div>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";

export default {
  name: "App",
  components: {
    VRuntimeTemplate,
  },
  data() {
    return {
      rows: [1,2,3],
      tmplt2: `
        <div>
          <p v-for="row in rows">{{ row }}</p>
        </div>
      `
    }
  }
}

[alexjoverm]

Any option is valid as long as the template access only component instance variables