I have been struggling with extracting the content from a specific div element in my HTML code.
<div id="output" ref="output_data">
<h1>{{ information }}</h1>
</div>
I attempted to retrieve the contents using innerHTML method as follows:
console.log( document.querySelector('#output').innerHTML );
I also tried accessing it through refs:
console.log( this.$refs['output_data'].innerHTML );
However, I was unable to see the content of the #output div. Surprisingly, I could only view the content of information generated by Vue on the webpage.
Below is the entire snippet of code:
<div id="app">
<div id="output" ref="output_data">
<span>{{ information }}</span>
<span>{{ details }}</span>
</div>
<button @click="displayInfo">Display Info</button>
<button @click="displayInfo2">Display Info 2</button>
<button @click="displayInfo3">Display Info 3</button>
<button @click="displayInfo4">Display Info 4</button>
</div>
new Vue({
el: '#app',
data: {
information: 'Lorem Ipsum',
details: ''
},
methods: {
displayInfo: function(){
this.details = 'sample';
console.log(document.querySelector('#output').innerHTML);
// The output contains HTML but 'information' is missing
}),
displayInfo2: function(){
this.name = 'test';
console.log(this.$refs['output_data'].innerHTML);
// The output contains HTML but 'information' is missing
}),
displayInfo3: function(){
this.name = 'test2';
console.log(this.$refs['output_data'].content.innerHTML);
// Returns an error
}),
displayInfo4: function(){
this.name = 'test3';
console.log(this.$refs['output_data'].toString());
// Outputs [object HTMLDivElement]
}),
}
});