时间戳

首页 > 解决方案 > 如何在这个 vuejs 示例中创建一个 href 条件？

javascript - 如何在这个 vuejs 示例中创建一个 href 条件？

问题描述

所以在下面的例子中 - 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 链接？

标签： javascriptvue.js

解决方案

如果我理解你的问题是正确的，你想显示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>

还有额外的不请自来的提示，您可能还想检查 ifvar_set.value条件中是否存在。您的数据可能定义明确，并且如果url存在，则可能值也可用，但最好是安全的

编辑 - 基于 o/ps 的注释/需要使用模板 因此，如果您要使用模板，它将如下所示，但请记住 atemplate用于包装多个元素，基于此处if-else的文档中所见，这意味着可以切换多个元素。

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

推荐阅读