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

目前，使用我使用的代码，超链接被映射到“查看”这个词是正确的，但是没有插入值或链接，导致点击时链接刷新页面。请帮忙....

谢谢

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>