Как правильно выполнить код внутри шаблона Vue?

Question

[MikUrrey]

Приветствую!
Вот пример кода:

<div v-else-if="column.type == 'badge'" :key="value">
                        <v-chip
                            small
                            :style="{
                                'border': '1px solid',
                                'border-color':join('status', 'id', props.value).edge_color||false,
                                'background': join('status', 'id', props.value).badge_color||'#fff',
                                'color': join('status', 'id', props.value).text_color||false
                            }"
                        >{{join('status', 'id', props.value).title||props.value}}</v-chip>
                    </div>

Как видно, здесь метод join повторяется несколько раз с одними и теми же аргументами.
Как правильно сразу определить объект, вызвав метод один раз, чтобы при этом не мусорить в data, computed, props и т. п.?

Answer 1

[MikUrrey]

Нашел лишь единственный способ: сделать собственный компонент.

<badge-cell :params="join('status', 'id', props.value)">{{props.value}}</badge-cell>

вот в нутри компонента как раз переданный объект декомпозируется в необходимые для вывода данные.