Skip to content

[2.0] Server-side rendering with v-text or v-html doesn't work well #3078

@kitak

Description

@kitak

Hi, I try to use renderToString to the elements with v-text or v-html. It doesn't work well.

This is the code to reproduce.

import Vue from './vue/dist/vue.common.js';
import { compileToFunctions } from './vue/packages/vue-template-compiler';
import createRenderer from './vue/packages/vue-server-renderer';
const { renderToString } = createRenderer();

let compileTemplate = (options) => {
  const res = compileToFunctions(options.template, {
    preserveWhitespace: false
  });
  Object.assign(options, res);
  console.assert(typeof options.render === 'function');
  delete options.template;
  return options;
};

let Foo = Vue.extend(compileTemplate({
  template: `
<div>
  <p v-text="text"></p>
  <p v-html="text"></p>
</div>
  `,
  data: function() {
    return {
      text: '<span>foobar</span>',
    };
  }
}));

renderToString(new Vue(compileTemplate({
  template: `<foo></foo>`,
  components: {
    foo: Foo
  }
})), (err, res) => {
  console.log(res);
});

// output: <div server-rendered="true"><p></p> <p></p></div>

Is this a bug or a feature? It seems to be resolved in this fix ( kitak@8d46106 ). If it is good, I will send PullRequest.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions