问题
I want to port my vue directive to also render server side.
client side:
mydirective(el,binding,vnode){
el.innerText = vnode.context.$data.points
}
What i have working so far in nuxt.config.js:
render: {
bundleRenderer: {
directives: {
mydirective(node, binding){
var points = node.context.$data.points //works
node.data.style = [{backgroundColor: 'green'}] //works
node.data.innerText = points //NOT working
node.data.textContent = points //NOT working
}
I cant find the element reference.
i used the following function to search through the node object:
Object.keys(node).forEach(key=>{
console.log(key)
console.log( node[key])
console.log('============================%%%%%%%%%%%%%%%%%%%%%================================')
})
enter code here
回答1:
Found it:
mydirective(node, binding){
var points = node.context.$data.points
node.data.domProps = {
innerHTML: points
}
}
documentation: https://vuejs.org/v2/guide/render-function.html#The-Virtual-DOM
来源:https://stackoverflow.com/questions/59401783/how-to-set-innertext-with-directive-in-ssr-vue-nuxt