在功能組件中將類作為函數 - 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',
};