如何在 SSR Vue/Nuxt 中使用指令设置 InnerText

Question

我想移植我的 vue 指令来渲染服务器端。

客户端：

mydirective(el,binding,vnode){
    el.innerText = vnode.context.$data.points
}

到目前为止我在 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
        }

我找不到元素参考。

我使用了以下函数来搜索节点对象：

  Object.keys(node).forEach(key=>{
    console.log(key)
    console.log( node[key])
    console.log('============================%%%%%%%%%%%%%%%%%%%%%================================')
  })
enter code here

Answer 1

找到了：

mydirective(node, binding){
     var points = node.context.$data.points
     node.data.domProps = {
          innerHTML: points
        }
}

文档：https://vuejs.org/v2/guide/render-function.html#The-Virtual-DOM

如何在 SSR Vue/Nuxt 中使用指令设置 InnerText

How to set InnerText with directive in SSR Vue/Nuxt

vue.js

server-side-rendering

nuxt.js

vue-ssr