CODEWITHSUNDEEP
javascriptvue.jsvuejs2
ST80
ST80

Reputation: 3903

Vue How to add phone number call link

In my vuejs-application, I have a table with some users which also includes a phone number. Now I want to make the phone number clickable, but for some reason it does not work.

This is what I got:

<router-link class="table-row" tag="div" v-for="entry in paginate(filteredData)" :key="entry.id" :to="routePath + entry.id">
   <div class="table-data" v-for="column in columns" v-bind:key="column.id" :class="column.key">
      <div v-if="column.key == 'phone'" :class="column.key">
         <span>
             <a href="tel:'`${entry[column.key]}`">{{entry[column.key]}}</a>
         </span>
      </div>
      <div v-else> 
        <span>{{entry[column.key]}}</span>
      </div>
   </div>
</router-link>

the result is <a href="/users/18/details">12448877</a> - which is the same route as the <router-link> - how can I achieve that the phone number gets displayed without using any plugin/package?

Upvotes: 1

Views: 7197

Answers (2)

cyril
cyril

Reputation: 1017

you can simply use this way

<a href="tel:{entry[column.key]}" > {{entry[column.key]}} </a>

avoiding too much useless code (working and tested with nuxt3)

Upvotes: 1

Premchand Mallah
Premchand Mallah

Reputation: 21

I think this line should be

<a href="tel:'`${entry[column.key]}`">{{entry[column.key]}}</a>

like

<a :href="`tel:${entry[column.key]}`">{{entry[column.key]}}</a>

Upvotes: 2

Related Questions