在功能组件中将类作为函数 - Vue

Question

I am writing a simple functional component in vuejs. Currently stuck at a situation where I want to add conditional css class based on the props passed to it.

However the below doesn't work as expected and I am wondering what wrong am I doing here.

<script>
export default {
  name: "BasePill",

  functional: true,

  props: {
    variant: String
  },

  render(createElement, { children, props }) {

    const componentData = {
      staticClass: "text-sm text-center"
      class: function() {
        if (props.variant === 'secondary') {
           return 'bg-secondary'
        }

        return 'bg-primary'
      }
    };

    return createElement("span", componentData, children);
  },
};
</script>

Answer 1

The class property cannot be a function, it needs to be a string/array/object.

Do this instead:

const componentData = {
  staticClass: 'text-sm text-center',
  class: props.variant === 'secondary' ? 'bg-secondary' : 'bg-primary',
};