Accessing v-for loop vars from v-runtime-template
hannesaasamets opened this issue · 4 comments
hannesaasamets commented
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>
damey2011 commented
it doesnt work for me too
alexjoverm commented
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 commented
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 commented
Any option is valid as long as the template access only component instance variables