Vue 如何添加电话号码通话链接

Question

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?

Answer 1

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>