html - add hyperlink in vue.js

Question

currently I am scraping some website and return the value of the scraped data (from json file) into an HTML table in one of the component file in vue.js When displaying one of the value, I want this value to be put as href="link". However, since I am iterating all the data, "the link" is in the form of {{ row[8] }} which cannot be read by the vue code. I tried:

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

but none of these work. Here is my code:

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

currently, with the code that I used, the hyperlink is mapped to the word "View" which is correct, but the value or the link is not inserted inside which caused the link when clicked to refresh the page instead. Please help....

Thank you

question from:https://stackoverflow.com/questions/65880701/add-hyperlink-in-vue-js

Answer 1

You do not need string interpolation when using the v-bind syntax as the scope of the expected argument is a javascript variable, e.g. row. Observe:

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

Which is syntactically the same as:

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