Esto es lo que estoy tratando de lograr:
<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>Estoy tratando de imprimir el contenido específico creado en el ciclo for. Botón incluido.
Dado que hay varias columnas, no puedo simplemente ponerle una identificación y tampoco puedo usar ref por la misma razón, y usar el elemento como parámetro para el método toma el objeto en lugar del html.
Simplemente agregue el valor que pasó al bucle v-for y vea la magia. Puede que esto no sea realmente lo que quieres, pero debería darte una mejor comprensión de lo que vas a hacer. Esto es suficiente.
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>