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

Ohgodwhy · Accepted Answer · 2021-01-25 07:54:44Z

6

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>

answered Jan 25, 2021 at 7:54

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bryanbram Over a year ago

yes thank you it works! May I know if I wanted the browser when click the "View" to be opened up a new tab should I just add a method .onclick?

Ohgodwhy Over a year ago

@bryanbram No, you can just use regular HTML and add target="_blank" and the users browser settings will determine what to do (new tab, or new window)

bryanbram Over a year ago

thank you but adding target="_blank" didn't work in my case, is it that I need to setup something for my chrome?

Ohgodwhy Over a year ago

@bryanbram No. You simply add it as a property: <a :href="row[8]" target="_blank"> View </a>

bryanbram Over a year ago

ahh yeah this one works. Cause initially I used <a v-bind:href="row[8]" target="_blank"> View </a> which didn't work. Thank you so much

Boussadjra Brahim · Accepted Answer · 2021-01-25 07:58:42Z

1

You could iterate through the row items and you reach the index 8 bind the item to the href attribute :

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

answered Jan 25, 2021 at 7:58

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

2 Comments

bryanbram Over a year ago

thank you but the target = "_blank" didn't work in my case.

Boussadjra Brahim Over a year ago

try out <a :href="item" target="_blank" rel="noopener noreferrer" >

Collectives™ on Stack Overflow

Add hyperlink in Vue.js

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related