How to set InnerText with directive in SSR Vue/Nuxt

安稳与你 提交于 2020-01-06 04:46:15

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!