After receiving some raw html from the server side, I wanted to dynamically update it using the Vue framework.
Initially, I tried using v-html for this purpose but realized that it doesn't respond to changes in Vue data values.
I found out that components could help achieve this, but I'm struggling to understand how to connect component content with Vue object data.
Imagine I have a Vue data value named table_html, which contains table data ready to be displayed on the page. How can I create a component that updates based on changes in table_html?
The code snippet below demonstrates my unsuccessful attempt at solving this issue. (It appears that assigning self = this results in self referring to the vue-component instead of its parent - the page object.)
page = new Vue({
components: {
'table-element': {
template: "<div>{{ table_html }}</div>",
data: function() {
self = this; // References the component, not the parent
return self.table_html // How to reference the Vue bound data?
}
}
},
el: "#container",
data: {
table_html: "<table>...table contents </table>
}