在Vue.js中添加超链接

Question

目前我正在爬取一些网站，将爬取的数据（来自json文件）的值返回到Vue.js中的一个组件文件中的HTML表格中。 当显示其中一个值时，我希望该值被放置为href="链接"。 然而，由于我正在迭代所有数据，“链接”是以{{ row[8] }}的形式呈现的，无法被Vue代码读取。 我尝试过：

<a v-bind:href="{{ row[8] }}"> View </a>
<a href={{ row[8] }}> View </a>
<a href="row[8]">View</a>

但是这些都不起作用。这是我的代码：

        <tbody>
              <tr v-for="row in sesami">
                <td>{{ row[0] }}</td>
                <td>{{ row[1] }}</td>
                <td>{{ row[2] }}</td>
                <td>{{ row[3] }}</td>
                <td>{{ row[4] }}</td>
                <td>{{ row[5] }}</td>
                <td>{{ row[6] }}</td>
                <td>{{ row[7] }}</td>
                <td>
                  <a href="row[8]">View</a>
                </td>
              </tr>
        </tbody>

目前，使用的代码将超链接映射到“查看”单词，这是正确的，但未插入值或链接，导致在单击链接时刷新页面。请帮忙解决。

谢谢。

- bryanbram

Answer 1

当使用v-bind语法时，由于期望的参数作用域是一个javascript变量（例如row），因此不需要使用字符串插值。请注意：

<a v-bind:href="row[8]"> View </a>

这在语法上与以下代码片段相同：

<a :href="row[8]"> View </a>

- Ohgodwhy

---

是的，谢谢，它有效！如果我想要在点击“查看”时浏览器打开一个新选项卡，我应该只需添加一个 .onclick 方法吗？ - bryanbram

@bryanbram 不需要，您只需使用常规的HTML并添加 target="_blank" ，用户的浏览器设置将决定如何处理它（新标签页或新窗口）。 - Ohgodwhy

谢谢，但在我的情况下添加target="_blank"并没有起作用，是我需要为我的Chrome设置一些东西吗？ - bryanbram

@bryanbram 不需要。你只需将其添加为属性：<a :href="row[8]" target="_blank"> 查看</a>。 - Ohgodwhy

啊，是的，这个可以工作。因为最初我使用了 <a v-bind:href="row[8]" target="_blank"> 查看</a> 它不起作用。非常感谢。 - bryanbram

Answer 2

你可以遍历行项目，当你到达索引8时，将该项绑定到href属性中：

<tbody>
       <tr v-for="row in sesami">
        <td v-for="(item ,i) in row">
            <template v-if="i===8">
                <a v-bind:href="item" target="_blank"> View </a>
             </template>
              <template v-else>
                {{item}}
             </template>
         </td>
        </tr>
</tbody>

- Boussadjra Brahim

---

谢谢，但是在我的情况下target = "_blank"没有起作用。 - bryanbram

尝试使用<a :href="item" target="_blank" rel="noopener noreferrer">。 - Boussadjra Brahim