Skip to content

Expose createTextVNode() 's functionality in the API #5870

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
green-coder opened this issue Jun 13, 2017 · 4 comments
Closed

Expose createTextVNode() 's functionality in the API #5870

green-coder opened this issue Jun 13, 2017 · 4 comments

Comments

@green-coder
Copy link

What problem does this feature solve?

In the Vue Component's render() function, there is no normal way to create a VNode which represents naked text, same as what createTextVNode() would create.

This is needed when we want to generate things like:

<div>
  Hello <strong>Vue</strong>'s world.
</div>

What does the proposed API look like?

I propose to change the API in one of those 2 ways:

  1. Add a behavior to the h function which is given to the user in the render() function so that it can be used for creating a 'text VNode', and document it. I propose to use the null or undefined on the first parameter.

  2. Expose the createTextVNode() function (and why not also VNode()) somewhere inside Vue.

@green-coder
Copy link
Author

green-coder commented Jun 13, 2017

Known 'hacky' workarounds:

  1. Use a non-documented compiler method
render (h) {
  return this._v(val) // Works .. *for now*.
}
  1. Use a poorly-documented method behavior's partial result.
render (h) {
  return h('p', val).children[0] // Works, but wastes CPU.
}

@yyx990803
Copy link
Member

You can just provide raw text:

return h('div', [
  'Hello ',
  h('strong', 'Vue'),
  '\'s world.'
])

@green-coder
Copy link
Author

green-coder commented Jun 13, 2017

That worked, thank you a lot.

You may want to add this information to documentation at https://vuejs.org/v2/guide/render-function.html#createElement-Arguments

Currently, the text say that the children should be VNodes.

@posva
Copy link
Member

posva commented Jun 13, 2017

@green-coder that would be great, could you make a pr to https://github.com/vuejs/vuejs.org ?

chrisvfritz pushed a commit to vuejs/v2.vuejs.org that referenced this issue Jun 15, 2017
* Makes a feature more obvious to the reader

... following an issue that I encountered.

vuejs/vue#5870 (comment)

* Added some missing commas
maks-rafalko pushed a commit to infection/site that referenced this issue Jun 29, 2017
* Makes a feature more obvious to the reader

... following an issue that I encountered.

vuejs/vue#5870 (comment)

* Added some missing commas
landry-some added a commit to landry-some/site that referenced this issue Oct 20, 2024
* Makes a feature more obvious to the reader

... following an issue that I encountered.

vuejs/vue#5870 (comment)

* Added some missing commas
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants