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

Question

我正在用 vuejs 编写一个简单的功能组件。目前陷入我想根据传递给它的道具添加条件css类的情况。

但是，以下内容无法按预期工作，我想知道我在这里做错了什么。

<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

class 属性不能是函数，它必须是字符串/数组/对象。

改为这样做：

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