Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17{ name: 'Bombay', colour: 'black', affection: 4, shedding: 2 }
]
},
created() {
window.onresize = event => {
this.width = document.body.clientWidth
}
},
components: {
BreedTable
}
})We are declaring the width variable to change the layout of the page and since the width of
the page is not reactive by nature, we're also installing a listener on window.onresize.
For a real project, you'll probably want something a bit more sophisticated, but for this
recipe, this will suffice.
Also, note how we are using the BreedTable component, which we write like this:
const BreedTable = {
functional: true,
render(h, context) {
if (context.parent.width > 400) {
return h(DesktopTable, context.data, context.children)
} else {
return h(MobileTable, context.data, context.children)
}
}
}What our component is doing is just passing all the context.data and
context.children to another component, which will be DesktopTable or
MobileTable, depending on the resolution.
Our HTML layout is the following:
<div id="app">
<h1>Breeds</h1>
<breed-table :breeds="breeds"></breed-table>
</div>