Print, on paper, element in a for-loop

Question

Here's what I'm trying to accomplish:

<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>

I'm trying to print the specific content created in the for-loop. Button included.

Since there are multiple columns, I can't just put an id on it and I can't use ref either for the same reason, and using the element as a parameter for the method grabs the object instead of the html.

Does this answer your question? [Print the contents of a DIV](https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div) — angel.bonev, Jul 04 '22 at 11:33
*Since there are multiple columns, I can't just put an id on it* - Why ? You can pass dynamic value in the id of each iteration. — Debug Diva, Jul 04 '22 at 13:22
@angel.bonev I can probably find a work-around, but since I'm using vue specifically and there are multiple columns with multiple elements, it will require a lot of tinkering to end up with what I want. I'm basically looking for a way to get a 'dynamic ref'. Or use Vue to my advantage in some way. — Nivyan, Jul 04 '22 at 13:26

score 0 · Answer 1 · answered Jul 04 '22 at 12:14

Simply add the value you passed to v-for loop and see the magic. This might not actually be what you want, but it should give a better understanding of what you're going to do. This is just enough.

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>

This is not what I asked. I asked how to print, on paper. Not console.log. — Nivyan, Jul 04 '22 at 13:24

score 0 · Accepted Answer · answered Jul 05 '22 at 08:46

I ended up using @RohìtJíndal' answer from the comments:

<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>

If you don't have a variable available, you can make one and increment it as part of the loop.

Print, on paper, element in a for-loop

2 Answers2