在vue.js中添加超链接

Question

目前我正在抓取一些网站，并将抓取数据的值(从json文件)返回到vue.js中的一个组件文件中的HTML表中。当显示其中一个值时，我希望将此值设置为href="link"。然而，由于我迭代了所有的数据，"链接"是{{row[8]}}的形式，不能被值代码读取。我试着:

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

当前，使用我使用的代码，超链接被映射到单词"View"这是正确的，但是值或链接没有插入其中，这导致点击链接时刷新页面。请帮助…

谢谢

Answer 1

使用v-bind语法时不需要字符串插值，因为预期参数的范围是javascript variable，例如row。观察:

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

在语法上与

相同

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

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>