CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Leon
Leon

Reputation: 2149

VueJS: How to access computed values in render function

I currently have a component with this render function: 

render(createElement, context) {

        return createElement(
            'div', {
                'class': 'sliced'
            },
            [
                createElement('div', {
                        'class' : 'sliced-inner',
                        'style' : context.style
                    }
                )

            ]
        )

    },

and I've added functional: true. The "style" is a computed value, but it doesn't seem to get passed with the context object. Is there any way to access computed values in a Vue render function?

Upvotes: 4

Views: 8183

Answers (1)

craig_h
craig_h

Reputation: 32694

A functional component has no state, so a computed property is redundant. In the following example I'm creating a header component that toggles between foo and bar when clicked:

Vue.component('message', {
  render (createElement) {
    return createElement('h1', {
      on: {
        click: event => {
          return this.foo = !this.foo 
        }
      }
    }, this.fooBar)
  },
  computed: {
    fooBar() {
      return (this.foo) ? 'foo' : 'bar'
    }
  },
  data(){
    return {
      foo: true
    }
  }
});

As you can see the header value is based on a computed, and it works fine because it is not a functional component so can have state: https://jsfiddle.net/hwbbukvd/

If I make that a functional component by adding functional: true, then it does not work because it's display relies on the component having state: https://jsfiddle.net/cygjdjru/

See: https://v2.vuejs.org/v2/guide/render-function.html#Functional-Components

In your case, if you aren't looking for style to be reactive, then I'm guessing you just want to pass a prop

Vue.component('message', {
  functional: true,
  render(createElement, context) {
    return createElement('h1', context.props.foo)
  },
  props: {
    foo: {
      required: true
    }
  }
});

See: https://jsfiddle.net/qhzh0a2c/

Upvotes: 8

Related Questions