Print, on paper, element in a for-loop-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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.