vue js, оценивающая переменную при передаче ее компоненту

Question

Мне интересно, не нужно ли это сделать, но мне нужен совет. У меня есть компонент Vue JS следующим

<media class="u-media-top u-padding Media--secondary t-borderleft-{{FetchCompanyName()}} t-borderbottom" title="School Name"> 
    {{organisation}} 
    </media> 

и внутри компонента я есть

<template><div class="Media" v-bind:class="class">.... 

так, как вы можете видеть, я передать список классов компонента и в компоненте связывания их всех к HTML. все хорошо. Однако я хочу, чтобы моя переменная (которая является строка, возвращенная из Mixin)

FetchCompanyName() 

быть оценены (я ожидал увидеть трет-borderleft-CompanyA) после того, как она передается через мой компонент. как он в настоящее время стоит, когда он загружается, я вижу

t-borderleft-{{FetchCompanyName()}} 

как я предполагаю, что он просто передал его, как строку. Может ли кто-нибудь дать мне совет о том, как я достиг бы того, чего хочу?

Приветствия Sam

Answer 1

Вы можете попробовать это:

<media :class="'t-borderleft-' + FetchCompanyName()" class="u-media-top u-padding Media--secondary t-borderbottom" title="School Name"> 
    {{organisation}} 
</media> 

Вы также должны удалить v-bind:class="class" внутри компонента.

Вы также можете попытаться сделать FetchCompanyName посчитанным значением