CODEWITHSUNDEEP
javascriptvue.js
Razvan Zamfir
Razvan Zamfir

Reputation: 4686

Error compiling template while trying to make email links in Vue

I am working on a small application that displays a "users" JSON in an HTML5 table. It uses Bootstrap 3 and Vue.

The code I have so far:

var app = new Vue({
  el: '#app',
  data () {
    return {
      users: null,
      loading: true,
      errored: false
    }
  },
  mounted () {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  }
});

Vue.filter('lowercase', function (value) {
  return value.toLowerCase();
})
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" class="container">
  <div class="panel panel-default table-container">
    <div class="panel-heading">Users</div>
    <div class="panel-body">
      <table class="table table-striped table-bordered" id="dataTable">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>City</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(user, index) in users">
            <td>{{index + 1}}</td>
            <td>{{user.name}}</td>
            <td>{{user.email | lowercase}}</td>
            <td>{{user.address.city}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

I want to turn the email addresses in the table into email links: <a :href="mailto:user.email | lowercase">{{user.email | lowercase}}.

The line above results in an Error compiling template and prevents the rendering of the table (even though <a :href="user.email | lowercase">{{user.email | lowercase}}does alow rendering.

Where am I wrong? What is a viable solution?

Upvotes: 2

Views: 2933

Answers (2)

Mike
Mike

Reputation: 81

My guess is that the | lowercase pipe / filter requires one argument and you're attempting to add two strings together ('mailto:' + user.email) immediately before it.

Try replacing with either: :href="('mailto:' + user.email) | lowercase"

or making 'mailto:' + user.email a computed property

Upvotes: 1

Towkir
Towkir

Reputation: 4014

You are mixing up the mailto inside a string with those email addresses.

Try this:

<td><a :href="'mailto:' + user.email | lowercase">{{user.email | lowercase}}</a></td>

var app = new Vue({
  el: '#app',
  data () {
    return {
      users: null,
      loading: true,
      errored: false
    }
  },
  mounted () {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  }
});

Vue.filter('lowercase', function (value) {
  return value.toLowerCase();
})
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" class="container">
  <div class="panel panel-default table-container">
    <div class="panel-heading">Users</div>
    <div class="panel-body">
      <table class="table table-striped table-bordered" id="dataTable">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>City</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(user, index) in users">
            <td>{{index + 1}}</td>
            <td>{{user.name}}</td>
            <td><a :href="'mailto:' + user.email | lowercase">{{user.email | lowercase}}</a></td>
            <td>{{user.address.city}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions