Question

因此在下面的示例中-gitHublink返回存储库的URL。问题是N / A具有指向N / A的href链接。

在模板中：

<td :style=tdStyle v-if="githubLink === 'N/A'"> no url found </td>
<template :v-else>
<td :style=tdStyle><a v-bind:href="[[ githubLink ]]">[[ githubLink ]]</a></td>
</template>

计算方法：

  githubLink() {
    returnVar = 'N/A'
    this.job.forEach(obj =>
        obj.env_vars.forEach(var_set => {
            if (var_set.name.name == 'url') {
                returnVar = 'https://github.corp.test.com/'+var_set.value.value
            }
        }
    ))
    return returnVar;
  },

如何做到这一点，以便在找不到URL的情况下没有href链接？

Answer 1

如果我对您的问题理解正确，那么您想显示No url found，如果github链接是null或undefined（在您的情况下，您将默认设置设置为 N / A ），否则显示链接a。

要这样做，您可以做的是使用v-else

有条件的渲染

从文档中可以看到，您可以使用v-if和v-else定义模板。（即）使用v-if检查githublink是否等于N/A以显示未找到url，类似

<td :style=tdStyle>
  <div v-if="githublink === 'N/A'"> no url found />
  <div v-else>
    <a :href="githubLink">{{githubLink}}</a></td>
  </div>
</td>

还有其他不请自来的提示，您可能还想检查if条件中是否存在var_set.value。 您的数据可能定义得很好，并且如果存在url，也可能会有价值，但为了安全起见更好

编辑-基于o / ps的注释/需要使用模板 因此，如果您要使用模板，则外观如下所示，但是请记住，template用于包装基于if-else的多个元素，如文档here所示，意味着人们不仅可以切换元素。

 <template  v-if="githublink === 'N/A'">
   <td :style=tdStyle> <strong> no url found </strong> </td>
  </template>
  <template v-else>
     <td :style=tdStyle> 
        <a :href="githubLink">{{githubLink}}</a>
     </td>
   </template>

Answer 2

我相信v-if / v-else可以解决您的问题

<td :style="tdStyle">
    <a v-if="githubLink !== 'N/A'" :href="githubLink">{{ githubLink }}</a>
    <span v-else>N/A</span>
</td>

如何在此vuejs示例中创建href条件？

2 个答案: