ES6 Unexpected string concatenation

Question

<template>
<label>Firstname: </label><input type="text" v-model="user.firstName">
    <br/>
    <label>Lastname: </label><input type="text" v-model="user.lastName">
    <h3>{{fullName}}</h3>
</template>

<script>
export default {
    name: 'homepage',
    data() {
      return {
        title: 'Hello',
        user: {
          firstName: 'name',
          lastName: 'surname',
        },
        showName: false,
        items: [
          {
            title: 'Item one',
          },
          {
            title: 'Item two',
          },
          {
            title: 'Item three',
          },
        ],
      };
    },
    computed: {
      fullName() {
        return this.user.firstName + ' ' + this.user.lastName;
      },
    },
  };
</script>

I am trying to return a string value in fullName() function but when I add + ' ' + ...., I get Unexpected string concatenation(prefer-template) error. If I just return this.user.firstName; it works. How can I return this.user.firstName + ' ' + this.user.lastName;?

Answer 1

This is a lint error. There is nothing inherently wrong from a JavaScript perspective with this.user.firstName + ' ' + this.user.lastName;. However your linter is setup to show an error when it finds string concatenation. Simply use a template string instead, as it is now the preferred method.

`${this.user.firstName} ${this.user.lastName}`

If you would prefer to use concatenation. Lookup how to modify your linters rule, for example here is how to do it for eslint (which I believe you are using).