在纸上打印for循环中的元素

Question

这是我想要完成的:

<div v-for="columns in pageStructure"
//Print from here
<div v-for="htmlIWantPrinted in array">
...some content...
<button @click="printElementDiv()">Print</button>
</div>
//To here
</div>

我正试图打印在for循环中创建的特定内容。包括按钮。

因为有多个列，我不能只在上面放一个id，我也不能使用ref，因为同样的原因，使用元素作为方法的参数来获取对象，而不是html。

Answer 1

只需添加传递给v-for循环的值，即可看到神奇的效果。这可能不是你想要的，但它应该能让你更好地理解你要做什么。这就够了。

var app = new Vue({
el: '#app',
data: {
pageStructure: ['Welcome', 'to', 'vue', 'world']
},
methods: {
printElementDiv(el) {
console.log(el)
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="column in pageStructure">
<h1>Div: {{column}}</h1>
<button @click="printElementDiv(column)">Print</button>
</div>
</div>

Answer 2

我最后使用了@RohìtJíndal的回答:

<div v-for="columns in pageStructure"
//Print from here
<div v-for="htmlIWantPrinted in array" :id="htmlIWantPrinted.id">
...some content...
<button @click="printElementDiv()">Print</button>
</div>
//To here
</div>

如果你没有可用的变量，你可以创建一个变量，并将其递增作为循环的一部分。