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()

在传递到我的组件后进行评估（我希望看到 t-borderleft-companyA）。当它加载时它当前的状态我看到

 t-borderleft-{{FetchCompanyName()}}

因为我假设它只是将它作为字符串传递。任何人都可以就如何实现我想要的目标给我建议吗？

干杯山姆

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 计算为属性

vue js 在传递给组件时评估变量

vue js evaluating a variable when passed to a component

components

vue.js